reactjs - 滚动时 React Native Flatlist 标题重新渲染

Question

我是 React Native 的新手，我在 FlatList 中遇到标题问题。当我开始滚动时，标题会重新呈现，这会对我在标题中的图像产生闪烁效果。我一直在到处寻找答案，但我还没有找到可行的解决方案。

我如何配置它以在滚动列表时停止重新呈现标题？

....

  const Item = ({ title }) => {
    return (
      <View style={styles.card}>
        <Text style={styles.title}>{title}</Text>
      </View>
    );
  };

  const listHeader = () => {
    const categoriesButtons = categories.map(cat => (
      <CategoryButton
        text={cat.name}
        icon={cat.code}
        key={cat.code}
        onPress={() => {
          //@Todo logic to filter promotions accordingly with the category pressed
        }}
      />
    ));
    return (
      <View>
        <View style={styles.filtersContainer}>
          <ImageBackground
            source={images.bgShape}
            style={{ width: '100%', height: 140 }}
            resizeMode="stretch"
          >
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              {categoriesButtons}
            </ScrollView>
          </ImageBackground>
        </View>

        <View style={styles.breadcrumbContainer}>
          <Breadcrumbs navigation={navigation} stack={routes} />
        </View>

        <View style={styles.titleContainer}>
          <Text style={sharedStyles.titleText} id="main-title">
            ¡{totalOfPromotions} promociones activas en Medellín!
          </Text>
        </View>
      </View>
    );
  };

  return (
    <LinearGradient
      colors={[Colors.BG_START, Colors.BG_END]}
      style={styles.mainContainer}
    >
      {loading ? (
        <ActivityIndicator size="large" color="#000000" />
      ) : (
        <FlatList
          data={promos}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={(item, index) => index.toString()}
          ListHeaderComponent={listHeader}
          showsVerticalScrollIndicator={false}
          onEndReached={showPromos}
          onEndThreshold={0.7}
        />
      )}
    </LinearGradient>
  );
};

Answer 1

listHeader() 函数被调用不止一次，因为在 Flatlist 标签中应该调用为

 <FlatList
          data={promos}
          renderItem={({ item }) => <Item title={item.title} />}
          keyExtractor={(item, index) => index.toString()}
          ListHeaderComponent={listHeader()}
          showsVerticalScrollIndicator={false}
          onEndReached={showPromos}
          onEndThreshold={0.7}
        />

在分配 ListHeaderComponent 属性时使用 ()。这样，函数只会被调用一次。

希望对您有所帮助。享受编码吧!