React Native Flatlist header 滚动时重新渲染

Question

我是 React Native 的新手，我遇到了 FlatList 中的 header 的问题。 一旦我开始滚动，header 就会重新渲染，这会对我在 header 中的图像产生闪烁效果。 我一直在到处寻找答案，但我没有找到可行的解决方案。

¿我如何配置它以在滚动列表时停止重新渲染 header？

....

  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() function 被多次调用，因为在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道具时使用 ()。 这样，function 只会被调用一次。

希望这对您有所帮助。 享受编码！

Answer 2

从我在您提供的代码中可以看到，您正在其他父组件中定义 ListHeader 组件，这将在每次渲染时重新定义它。 将它移到父组件之外可能会有所帮助。