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组件，该组件将在每个渲染器上重新定义它。将其移动到父组件之外可能会有所帮助。

Answer 2

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 道具时使用（）。这样，函数将仅被调用一次。

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

滚动时反应本机Flatlist标头重新呈现

2 个答案: