React Native使用动态路径加载静态图片失败该如何解决

问题根因 #

• uri相对路径加载失败原因：React Native 打包时会对项目内的静态图片资源做重命名处理，生成对应平台的专属资源ID，运行时传入的项目相对路径无法匹配到打包后的实际资源地址。{uri: 路径}的写法仅支持加载网络图片、设备本地沙盒/相册的绝对路径图片，不支持项目内静态资源的相对路径寻址。
• require动态路径报错原因：React Native 的require逻辑执行于编译打包阶段，打包工具需要提前扫描所有固定字符串格式的require路径，把对应资源打入安装包。动态拼接的路径字符串在编译阶段无法被识别，因此会直接抛出语法错误，只有固定路径的require写法能被正确解析。

实现动态加载静态图片的方案 #

方案1：静态资源预映射（官方推荐） #

提前把所有需要用到的图片资源require后存入数组或对象，运行时直接通过索引/键名取对应资源即可，适配性最高，不会出现清晰度问题。
示例代码：

// 提前定义所有静态资源映射
const assetMap = [
  require('../assets/0.jpg'),
  require('../assets/1.jpg'),
  require('../assets/2.jpg'),
  require('../assets/3.jpg'),
  require('../assets/4.jpg')
];

// 渲染时动态读取
{[...Array(5)].map((_, index) => (
  <Image key={index} source={assetMap[index]} />
))}

如果需要通过文件名动态匹配，可以用对象做映射：

const assetMap = {
  banner: require('../assets/banner.jpg'),
  avatar: require('../assets/user_avatar.jpg'),
  icon: require('../assets/notice_icon.jpg')
};

// 使用时直接传入对应键名
<Image source={assetMap['banner']} />

方案2：原生资源目录存放 #

如果图片量极大，预写require成本过高，可以把图片放到原生平台的资源目录下：

• iOS 放到ios/项目名/Images.xcassets目录
• Android 放到android/app/src/main/res/drawable相关目录
  打包时这些资源会直接作为原生资源打入安装包，运行时可直接通过文件名（不带后缀）作为uri加载：

{[...Array(5)].map((_, index) => (
  <Image key={index} source={{ uri: String(index) }} />
))}

注意：该方案需要按照原生平台的规则存放不同分辨率的切图，否则可能出现图片模糊问题。

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