滚动FlashList时仅固定筛选栏的高性能实现方案咨询

可以利用FlashList（继承自FlatList）原生支持的stickyHeaderComponent属性实现需求，完全不需要滚动监听器，性能友好。

核心思路：将需要随列表滚动滑出的<Header>放在ListHeaderComponent中，把需要固定在顶部的<SlideFilterList>单独设置为stickyHeaderComponent，滚动时该组件会自动固定在屏幕顶部，无需额外监听逻辑。

修改后的代码如下：

return (
  <Container>
    <View style={{ height: "100%" }}>
      <FlashList
        ref={flatListRef}
        // Header作为普通列表头部，随滚动滑出
        ListHeaderComponent={<Header HeaderType="LOGO" ContentText="" />}
        // SlideFilterList设为粘性头部，滚动时固定在顶部
        stickyHeaderComponent={
          <SlideFilterList setIsSelect={setIsSelect} isSelect={isSelect} />
        }
        data={promo}
        ListEmptyComponent={<View style={{ alignItems: "center" }}></View>}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({ item }) => (
          <View style={{ width: "100%", alignItems: "center" }}>
            <ProductCard product={item} />
          </View>
        )}
        refreshing={false}
        showsVerticalScrollIndicator={false}
        ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
        onEndReached={handleEndReached}
        onEndReachedThreshold={0.2}
        estimatedItemSize={200}
        ListFooterComponent={
          loading ? (
            <View>
              <ActivityIndicator
                size={25}
                color={theme.defaultTheme.primary.medium}
              />
            </View>
          ) : (
            <></>
          )
        }
      />
    </View>
  </Container>
);

补充说明 #

• stickyHeaderComponent是FlashList/FlatList原生属性，通过原生渲染逻辑实现固定，比自定义滚动监听器性能更稳定
• 若需要给粘性头部添加顶部阴影等样式，可在外层套一个View设置样式，示例：

stickyHeaderComponent={
  <View style={{ shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.1, shadowRadius: 4 }}>
    <SlideFilterList setIsSelect={setIsSelect} isSelect={isSelect} />
  </View>
}

内容的提问来源于stack exchange，提问作者Renan Almeida