React Native：SectionList内渲染图片时帧率降至10fps问题求助

针对你遇到的安卓设备上横向FlatList（react-native-snap-carousel）嵌套SectionList时，图片渲染导致帧率骤降的问题，我分享几个实战有效的优化方案：

一、优先优化图片加载与渲染 #

这是最核心的性能瓶颈点，安卓原生Image组件在处理图片时内存占用和渲染开销都比较高，试试这些手段：

• 替换为react-native-fast-image：这个第三方库底层用安卓Glide/iOS SDWebImage实现，加载速度更快、缓存策略更高效，能大幅降低图片渲染对帧率的影响。使用时记得配置合适的缓存类型，比如磁盘缓存减少内存压力：

  import FastImage from 'react-native-fast-image';
  
  // 替换原生Image
  <FastImage
    source={{ uri: item.imageUrl }}
    style={styles.image}
    resizeMode={FastImage.resizeMode.cover}
    cacheControl={FastImage.cacheControl.cacheOnly}
  />
  

• 压缩图片资源：不要直接使用原图，把图片压缩到和SectionList条目匹配的尺寸（比如条目宽200px，就把图片压缩到200px宽），减少内存占用和渲染计算量。
• 图片懒加载：只渲染当前视口内的图片，不在屏幕中的条目先显示占位图（比如纯色View或低分辨率缩略图）。可以通过监听SectionList的onViewableItemsChanged回调，标记哪些条目处于可见状态，再决定是否渲染高清图片：

  const [viewableItems, setViewableItems] = useState([]);
  const viewabilityConfig = { viewAreaCoveragePercentThreshold: 50 };
  
  const onViewableItemsChanged = useRef(({ viewableItems }) => {
    setViewableItems(viewableItems.map(item => item.key));
  });
  
  // 在renderItem中判断
  const renderItem = ({ item }) => (
    <TimelineItem
      item={item}
      isVisible={viewableItems.includes(item.key)}
    />
  );
  

二、优化滚动组件的渲染性能 #

嵌套滚动组件本身容易带来渲染压力，加上这些配置能进一步提升帧率：

• 开启removeClippedSubviews：给FlatList和SectionList都加上这个属性，它会自动移除不在屏幕范围内的子组件，减少视图树的渲染节点数量：

  <FlatList
    removeClippedSubviews={true}
    // 其他属性...
  />
  <SectionList
    removeClippedSubviews={true}
    // 其他属性...
  />
  

• 用React.memo包裹列表项组件：避免不必要的重渲染，确保只有当item数据变化时才重新渲染：

  const TimelineItem = React.memo(({ item, isVisible }) => {
    return (
      <View style={styles.itemContainer}>
        <Text>{item.text}</Text>
        {isVisible && <FastImage source={{ uri: item.imageUrl }} style={styles.image} />}
      </View>
    );
  });
  

• 调整windowSize属性：缩小FlatList和SectionList的预加载范围，比如把windowSize={3}，只渲染当前屏幕和前后各一个屏幕的内容，减少一次性渲染的条目数量。

三、安卓特定优化 #

针对安卓设备的特性，再做些针对性调整：

• 关闭过度绘制：打开安卓开发者选项的「调试GPU过度绘制」，如果发现列表区域有大面积红色（严重过度绘制），优化布局结构，减少嵌套的View层级，比如用StyleSheet.flatten合并样式，或者用View替代不必要的嵌套容器。
• 禁用不必要的SectionList特性：如果不需要粘性头部，关闭stickySectionHeadersEnabled={false}，减少布局计算开销。

按照这个顺序优化下来，应该能把帧率稳定在50fps以上，解决滚动卡顿的问题。

内容的提问来源于stack exchange，提问作者Francisco Sarmento