React Native FlatList滚动性能低及快速滚动出现白屏问题咨询

1 原生FlatList参数优化 #

先尝试调整FlatList自带配置，大部分场景下可以解决白屏问题：

• 调高windowSize值：默认值为21，代表视口上下各渲染10个屏的内容，可以调整到30~40，适当多预渲染内容减少白屏，注意不要设置过高避免内存占用超标
• 关闭removeClippedSubviews：该属性默认开启会自动裁剪不可见视图，动态高度场景下容易触发视图复用bug导致白屏，设置为false即可大幅改善相关问题
• 调整maxToRenderPerBatch：默认值为10，可以调到15~20，每批次渲染更多列表项，减少滚动过程中的渲染空档
• 设置scrollEventThrottle为16：保证滚动事件每帧触发一次，让FlatList可以实时计算可视区域位置，避免位置计算偏差出现空白

2 动态高度缓存方案 #

如果参数调整效果不足，可以通过高度缓存消除布局偏差：

• 提前计算高度：如果列表项内容可以通过文本长度、图片尺寸等参数提前计算得到高度，将高度值存入数组后通过getItemLayout属性传递给FlatList，让FlatList无需实时计算高度，完全避免高度计算偏差导致的白屏，示例代码如下：

<FlatList
  data={listData}
  renderItem={renderItem}
  getItemLayout={(data, index) => ({
    length: preCalculatedHeights[index],
    offset: preCalculatedHeights.slice(0, index).reduce((sum, h) => sum + h, 0),
    index
  })}
/>

• 渲染时缓存高度：如果无法提前计算高度，可以在列表项第一次渲染完成后，通过onLayout回调获取实际高度存入数组，后续滚动到对应项时直接复用缓存高度，避免重复渲染时的高度跳变和空白问题

3 适配动态高度的高性能列表方案 #

如果你尝试的第三方库要求固定高度不符合需求，可以替换为支持动态高度的高性能列表组件：

• 替换为@shopify/flash-list：该组件完全兼容FlatList API，原生支持动态高度列表项，性能比原生FlatList高5~10倍，默认解决了快速滚动白屏问题，无需手动处理固定高度，直接替换组件标签即可，使用成本极低
• 如果需要自定义实现，可以配合react-native-reanimated用共享值管理列表项高度和偏移，避免JS线程和原生线程通信延迟导致的布局偏差

4 额外优化建议 #

• 列表项组件用React.memo包裹，避免不必要的重渲染拖慢渲染速度，导致滚动时来不及渲染出现空白
• 不要在列表项的render函数中执行复杂计算，所有复杂逻辑提前处理完成后存入缓存，render函数仅做纯渲染逻辑
• 包含图片的列表项要提前做尺寸适配和缓存，避免图片加载完成后高度跳变，导致FlatList布局计算错误出现空白

内容的提问来源于stack exchange，提问作者Mohammad JB