React Native中Flatlist展示视频时快速滚动出现白屏如何解决？

排查方向 #

• 检查FlatList基础属性配置是否合理，比如windowSize、removeClippedSubviews、maxToRenderPerBatch等核心滚动优化参数是否设置不当
• 排查视频组件的实例复用逻辑，是否滚动时不断创建新的视频实例、未回收离屏的视频资源导致内存占用过高，触发JS线程或UI线程阻塞
• 排查列表项渲染逻辑，是否存在不必要的重渲染：比如函数式组件未用React.memo包裹列表项，每次列表状态更新全量重渲染所有可见项
• 排查视频加载逻辑，是否每次进入可视区域都重新发起全量视频资源请求，未做本地缓存，请求阻塞导致渲染延迟
• 排查内存占用情况，快速滚动时是否内存持续上涨触发系统回收资源，导致视图被临时卸载

具体解决方案 #

1. 优化FlatList基础配置 #

给FlatList设置如下优化属性：

const ITEM_HEIGHT = 300 // 替换为实际列表项高度
<FlatList
  // 控制渲染窗口大小，默认是21，设置为5-10即可，减少离屏渲染的视图数量
  windowSize={6}
  // 每批渲染的最大列表项数，避免一次性渲染过多内容阻塞线程
  maxToRenderPerBatch={3}
  // 开启裁剪离屏视图，降低原生渲染压力
  removeClippedSubviews={true}
  // 列表项唯一标识，避免不必要的节点重建
  keyExtractor={(item) => item.id}
  // 控制预加载的偏移量，按需调整，不要设置过大
  onEndReachedThreshold={0.3}
  // 如果列表项高度固定，传入getItemLayout避免动态计算布局开销
  getItemLayout={(data, index) => (
    {length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index}
  )}
  {...otherProps}
/>

2. 优化列表项渲染性能 #

• 用React.memo包裹列表项组件，通过自定义比较函数控制仅在视频数据源变化时才重渲染：

const VideoListItem = React.memo(({ item }) => {
  // 组件业务逻辑
}, (prev, next) => prev.item.videoUrl === next.item.videoUrl)

• 不要在render函数内创建新的匿名函数、新对象，避免每次渲染传递给列表项的props变化触发重渲染。

3. 优化视频组件复用与资源管理 #

• 复用视频播放器实例，不要每个列表项都单独创建一个播放器实例：仅在可视区域内的列表项挂载播放器，离屏的列表项卸载播放器、释放对应内存和解码资源
• 监听FlatList的onViewableItemsChanged回调，仅给当前可见的视频项触发播放/加载逻辑，离屏项暂停加载、销毁播放器实例
• 开启视频缓存配置，使用支持本地缓存的视频组件，避免重复请求同一视频资源。

4. 兜底优化 #

• 给视频加载过程添加占位图，即使视频还未加载完成也不会显示白屏，提升用户感知
• 对于低端设备，可以降低首帧加载的清晰度，快速渲染出首帧后再切换高清资源
• 排查是否有JS线程的长任务阻塞渲染，把视频初始化、资源请求等逻辑放到微任务或拆分到多个帧执行，避免阻塞UI渲染

内容的提问来源于stack exchange，提问作者NM OX