React Native FlatList在Android端仅加载5张网络图片出现严重性能问题

问题排查与修复方案 #

• 优先排查远程图片实际分辨率：你给出的thumbnail字段对应的图片如果是原图直接作为缩略图使用（比如单张分辨率超过2k），Android原生Image组件默认不会自动下采样，会把整张原图解码加载到内存，单张4k图就会占用近30MB内存，5张就会触发内存飙升掉帧，iOS系统默认会自动按显示尺寸下采样所以表现正常。
  • 最优解是让服务端生成和Thumbnail组件显示尺寸匹配的缩略图，源文件体积控制在几百KB以内。
  • 临时修复可以在Thumbnail内部的Image组件上添加resizeMethod="resize"属性，该属性仅对Android生效，会在解码前将图片缩放到接近显示尺寸，内存占用可以下降80%以上，iOS会自动忽略该属性不影响原有表现。
• 检查Thumbnail内部的Image组件配置：
  • 必须给Image设置固定的宽高数值，不要用flex或者自适应尺寸，避免图片解码时计算尺寸异常。
  • 避免使用resizeMode="contain"或默认配置，根据需求设置为resizeMode="cover"即可。
• 优化FlatList渲染逻辑：你当前renderItem内使用了多个内联匿名函数，每次列表重渲染时会触发所有ListItem不必要的重绘，将回调提到组件外部用useCallback包裹：

  // 组件顶层用useCallback包裹回调
  const handleGalleryPress = useCallback((item) => {
    galleryPressedHandler(item)
  }, [galleryPressedHandler])
  
  const handleActionsPress = useCallback((galleryId) => {
    bottomSheetRef.current?.handlePresentModalPress()
    setDeleteID(galleryId)
  }, [bottomSheetRef, setDeleteID])
  
  // renderItem内直接调用
  renderItem={({ item }) => (
    <Thumbnail
      images={item}
      galleryPressedHandler={() => handleGalleryPress(item)}
      navigation={props.navigation}
      galleryName={item.galleryName}
      onActionsPressed={() => handleActionsPress(item.galleryID)}
      key={item.galleryID}
    />
  )}
  

• 关闭removeClippedSubviews属性：该属性在Android低版本RN/Expo中存在已知bug，不仅不会优化内存反而会导致视图销毁时内存不释放，直接删除该行配置即可。
• 升级Expo版本到48及以上：该版本修复了多个Android端原生Image组件内存泄漏的底层问题，不需要修改业务代码即可提升性能。
• 开启Android大内存与硬件加速配置：在app.json中添加如下配置：

  {
    "expo": {
      "android": {
        "largeHeap": true,
        "hardwareAccelerated": true
      }
    }
  }
  

• 若以上方案都无效果，可以使用Expo官方自带的expo-image组件替换原生Image组件，该组件是Expo技术栈内置的官方优化组件，不需要引入第三方外部库，内存占用和加载速度远优于原生Image组件。

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