React Native Android CLI：如何将网络图片保存到项目assets目录？

你要存入的src/components/assets/image是项目的源码资产目录，这个目录在Android打包后会被编译进APK，属于只读资源，运行时无法向其中写入文件。所以你需要换个思路：把图片保存到设备的可读写存储目录，之后通过本地路径引用该图片即可。

你现有代码的问题 #

1. 你使用了cp方法，但传入的imagePath是网络URL，cp只能复制本地文件，无法直接处理网络资源，必须先完成下载操作。
2. 目标路径的选择方向是对的（DocumentDir是应用私有可读写目录），但误解了“项目本地assets路径”的可写性。

正确实现代码（基于rn-fetch-blob） #

首先确保已安装依赖：

npm install rn-fetch-blob --save

实现保存逻辑：

import RNFetchBlob from 'rn-fetch-blob';

const saveImageToLocal = async (imageUrl) => {
  // 自定义应用私有存储子目录，避免和其他文件混淆
  const targetDir = `${RNFetchBlob.fs.dirs.DocumentDir}/app_profile_images`;
  const imageName = 'profileImages.jpg';
  const targetPath = `${targetDir}/${imageName}`;

  try {
    // 检查目标目录是否存在，不存在则创建
    const isDirExist = await RNFetchBlob.fs.exists(targetDir);
    if (!isDirExist) {
      await RNFetchBlob.fs.mkdir(targetDir);
    }

    // 下载网络图片到指定路径
    await RNFetchBlob.config({
      path: targetPath,
    }).fetch('GET', imageUrl);

    console.log('图片保存成功，本地路径：', targetPath);
    return targetPath; // 返回路径供后续显示使用
  } catch (error) {
    console.error('保存图片失败：', error);
    throw error;
  }
};

后续使用示例 #

要显示已保存的图片，直接使用本地路径即可：

import { Image } from 'react-native';

// 假设已经获取到保存后的targetPath
<Image 
  source={{ uri: targetPath }} 
  style={{ width: 150, height: 150, borderRadius: 75 }} 
/>

权限说明 #

• 如果选择保存到应用私有目录（比如DocumentDir），Android 6.0及以上无需额外申请存储权限。
• 如果要保存到公共外部存储（比如RNFetchBlob.fs.dirs.ExternalStorageDirectory），需要在AndroidManifest.xml中添加权限，并在运行时申请：

  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
  

  Android 10及以上还需在application标签添加：

  android:requestLegacyExternalStorage="true"
  

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