React Native iOS端Shopify FlashList滚动时内容闪烁问题求助

阿华AIGC实验室

2026-4-8

我们现在卡在一个问题上，急需社区的大佬们帮忙出出主意——哪怕是能帮我们理清问题根源的思路也行！我们正在用React Native开发一个图片密集型的信息流应用，用的是Shopify的FlashList组件。其他功能都正常，就是滚动的时候会出现内容快速闪烁或者跳动的情况，不管是模拟器还是iOS真机都有这个问题。我们已经试了一堆方法，但还是没解决，想问问大家有没有遗漏的点？另外，在这种图片密集的场景下，FlashList真的能做到完全流畅的滚动性能吗？

我们已经尝试过的方案

所有状态都统一在父组件中管理
已经配置了extraData来触发列表更新
反复调整estimatedItemSize：
- 精确计算后设为604px
- 试过FlashList官方推荐的614px
- 甚至降到300px测试，当前代码里设为607px
启用了固定项布局（fixed item layout）
drawDistance设为预估项高度的2倍（当前代码里是2000）
子组件没有使用key属性

环境信息

@shopify/flash-list: 1.8.0
react-native: 0.74.5
expo: ~51.0.39

代码片段

<FlashList
  ref={ref}
  data={nodeList}
  extraData={{ map: extraDataMap, nodeCount: nodeList.length }}
  renderItem={renderFlashListItem}
  ListHeaderComponent={() => Header(nodeList[0]?.source_type === 'suggested')}
  ListFooterComponent={Footer}
  ItemSeparatorComponent={Divider}
  estimatedListSize={{ width: deviceState.screenWidth, height: deviceState.screenUsableHeight }}
  estimatedItemSize={607}
  drawDistance={2000}
  onRefresh={refreshScreen}
  onEndReached={loadMoreData}
  onEndReachedThreshold={0.8}
  removeClippedSubviews
  refreshing={false}
  showsVerticalScrollIndicator={false}
  disableAutoLayout
  keyExtractor={keyExtractor}
/>

真的非常感谢大家的任何建议和思路！

内容来源于stack exchange