React Native安卓FlatList图片不显示，报Pool hard cap violation错误

问题背景 #

在React Native的FlatList中实现下拉加载更多，加载24-25张图片后，部分安卓设备/模拟器触发Image组件的onError回调，报错：
Pool hard cap violation? Hard cap = 150994944 Used size = 150539928 Free size = 0 Request size = 1680000
注意：单张图片文件大小约200kb，但解码后的内存占用远大于文件大小（比如一张1080p图片解码后可能占8MB以上），这才是触发安卓图片内存池上限的核心原因。

解决方案 #

• 明确指定图片显示尺寸：给列表项的Image组件固定宽高，让React Native只解码所需尺寸的图片，避免加载原图全尺寸解码。示例：

  <Image
    ref={imageRef}
    onError={(e) => {
      console.log('IMAGE LOAD error', e.nativeEvent.error);
    }}
    {...props}
    source={source}
    onLoadEnd={onLoadEnd}
    resizeMode="cover"
    style={{ width: 160, height: 120 }} // 根据列表项实际布局设置
    resizeMethod="resize" // 优先使用resize而非scale，进一步降低内存占用
  />
  

• 开启FlatList内存优化：设置removeClippedSubviews={true}，让屏幕外的列表项自动释放视图资源，包括图片占用的内存：

  <FlatList
    data={data}
    renderItem={renderItem}
    removeClippedSubviews={true}
    // 其他配置项
  />
  

• 调整安卓内存堆配置：在android/app/src/main/AndroidManifest.xml的<application>标签中添加android:largeHeap="true"，给应用分配更大的内存堆：

  <application
    android:name=".MainApplication"
    android:label="@string/app_name"
    android:largeHeap="true"
    // 其他原有属性
  >
  

• 手动清理图片资源：在列表项组件的卸载阶段，通过ref清理图片缓存（部分React Native版本支持）：

  useEffect(() => {
    return () => {
      imageRef.current?.clear?.();
    };
  }, []);
  

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