在网格和列表视图之间切换反应本地（flatList）每次都会呈现标题

Question

我有一个列表，当我在网格和列表视图之间单击一个按钮时。问题在于我的flatlist我有一个listheaderComponent，每次在两者之间切换时都会呈现，并且我不希望它重新渲染。

另外，我无法将标头放在lactlist外面，因为我需要它滚动，并且无法用scrollview包装所有屏幕。 更改ISGRID时的flatlist rerenders 我该如何解决？

这是我的实现：

flatlist组件：

<SafeAreaView style={styles.screen}>
  <FlatList
    ref={flatListRef}
    data={ads}
    numColumns={isGrid ? 2 : 1}
    key={isGrid ? 1 : 0}
    nestedScrollEnabled
    columnWrapperStyle={isGrid ? styles.grid : null}
    initialScrollIndex={0}
    onEndReachedThreshold={0.5}
    onEndReached={onEndReached}
    ListHeaderComponent={Header}
    keyExtractor={(item) => item?._id}
    showsVerticalScrollIndicator={false}
    ListHeaderComponentStyle={HeaderStyle}
    ListFooterComponentStyle={footerStyle || styles.footerStyle}
    renderItem={({ item, index }) =>
      isGrid ? (
        <AdCard
          ad={item}
          onPress={() => goToDetails(item?._id, index)}
          containerStyle={styles.gridCardStyle}
        />
      ) : (
        <AdsCard
          ad={item}
          onPressThreeDot={onPressThreeDot}
          onPress={() => goToDetails(item?._id, index)}
          isList={true}
          containerStyle={styles.adCard}
        />
      )
    }
    ListEmptyComponent={loading ? loadingPlaceholder : noAdsComponent}
    contentContainerStyle={
      isGrid ? styles.gridStyle : styles.contentContainerStyle
    }
    getItemLayout={(d, index) => {
      return isGrid
        ? { length: hp(250), offset: index * hp(250), index }
        : { length: hp(348), offset: index * hp(348), index };
    }}
    ListFooterComponent={<AdsEndMessage isLoading={loading} />}
    refreshControl={
      <RefreshControl
        refreshing={isRefreshing}
        onRefresh={onRefresh}
        tintColor={BURNING_ORANGE}
        colors={[BURNING_ORANGE]}
      />
    }
  />
</SafeAreaView>

标头组件（作为道具传递给flatlist）：

<SafeAreaView style={styles.container}>
  {bannerAds?.length > 0 && <BannerAds bannerAds={bannerAds} />}
  <SectionHeader sectionStyle={styles.sectionStyle} />
  <HomeAdsTab />
  <View style={styles.toggleView}>
    <Text style={styles.title}>{t('common.tazweed-marketplace')}</Text>
    <ToggleGridOrList />
  </View>
</SafeAreaView>

提前感谢您

Answer 1

经过大量研究，没有解决方案……我很自豪地说我已经发现了一项很好的工作。基本上，您所拥有的东西是将numcolumns设置为某些静态变量的。在我的情况下，我将其设置为2。然后使用columnWrapperStyle，然后根据可以设置的某些状态切换flexDirection。

这样的事情：

numColumns={2}
contentContainerStyle={contentContainerStyle}
renderItem={renderItem}
columnWrapperStyle={{ flexDirection: !showCollectables ? 'column' : 'row' } as ViewStyle }