Android发布模式下能否获取React Native本地图片资源的绝对URI？

Android发布模式下，React Native打包后的本地资源会被整合进APK的assets目录，此时Image.resolveAssetSource返回的是相对资源标识（而非文件系统绝对路径），导致表单上传时无法被网络请求正确识别。以下是两种可行的解决方法：

方法一：通过文件系统缓存生成绝对路径 #

借助react-native-fs库将assets中的资源复制到应用缓存目录，生成可被网络请求识别的绝对URI：

1. 安装依赖：

   npm install react-native-fs --save
   # RN 0.60+自动完成链接，低版本需手动执行react-native link
   

2. 实现绝对URI获取函数：

   import RNFS from 'react-native-fs';
   import { Image } from 'react-native';
   
   /**
    * 将本地资源转换为Android发布模式可用的绝对URI
    * @param {string} imagePath - require中的资源路径，如'./assets/icon.png'
    * @returns {Promise<string>} 绝对文件URI
    */
   const getAbsoluteAssetUri = async (imagePath) => {
     const asset = Image.resolveAssetSource(require(imagePath));
     // 提取assets资源的文件名（Android发布模式下uri格式为'assets_xxx.ext'）
     const assetFileName = asset.uri.split('_').pop();
   
     try {
       // 读取assets中的文件内容（base64格式）
       const assetContent = await RNFS.readFileAssets(assetFileName, 'base64');
       // 生成缓存文件路径
       const cacheFilePath = `${RNFS.CachesDirectoryPath}/${assetFileName}`;
       // 将内容写入缓存文件
       await RNFS.writeFile(cacheFilePath, assetContent, 'base64');
       // 返回带file://前缀的绝对URI
       return `file://${cacheFilePath}`;
     } catch (error) {
       console.error('转换资源URI失败:', error);
       throw error;
     }
   };
   
   // 使用示例
   getAbsoluteAssetUri('./assets/your-image.png').then(uri => {
     // 将此uri作为表单数据的参数上传
     console.log('绝对URI:', uri);
   });
   

方法二：手动放置资源到assets目录并直接拼接路径 #

如果是固定的静态资源，可手动将图片放入android/app/src/main/assets目录（可自行创建子目录如images），然后直接通过react-native-fs的资产目录路径拼接绝对URI：

import RNFS from 'react-native-fs';

// 假设图片放在android/app/src/main/assets/images/avatar.png
const absoluteUri = `file://${RNFS.AssetDirectoryPath}/images/avatar.png`;

这种方法无需复制文件，但需要手动维护assets目录下的资源，且无法通过require的方式享受React Native的资源打包优化。

注意事项 #

• 缓存文件使用后建议适时删除，避免占用过多存储空间：

  // 删除指定缓存文件
  RNFS.unlink(cacheFilePath).catch(err => console.error('删除缓存文件失败:', err));
  

• 需处理文件读写过程中的异常，避免应用崩溃。

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