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

我是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>
  );
};
vcx111 回答:滚动时反应本机Flatlist标头重新呈现

从您提供的代码中可以看到,您正在其他父组件中定义ListHeader组件,该组件将在每个渲染器上重新定义它。 将其移动到父组件之外可能会有所帮助。

,

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

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

本文链接:https://www.f2er.com/3155360.html

大家都在问