React Native 使用API返回的动态文件名加载本地asset图片失败求助

问题根因 #

React Native 的 require 静态资源引入是打包阶段静态解析的，打包工具会提前把所有require引用的资源打包到安装包内，不支持运行时传入动态变量拼接路径，所以你尝试的4种写法都不符合RN的资源加载规则，自然无法生效：

• 前两种写法直接给source传入字符串路径属于语法错误，本地静态资源必须传入require返回的资源对象，只有远程图片才需要传入{uri: '远程链接'}格式的对象
• 后两种在require中使用动态变量拼接路径，打包阶段无法识别具体要加载的资源，会直接报错

解决方案 #

方案1：预定义资源映射表（最常用，适配多端） #

提前把所有可能用到的Topup目录下的图片全部预引入，做成键值对映射表，运行时根据返回的文件名直接取对应的预加载资源即可：

// 提前声明所有可用的充值类图片映射
const TopupImageMap = {
  'alipay.png': require('../../../asset/images/Topup/alipay.png'),
  'wechat_pay.png': require('../../../asset/images/Topup/wechat_pay.png'),
  'bank_card.png': require('../../../asset/images/Topup/bank_card.png'),
  // 把该目录下所有可能返回的图片全部按上述格式列全
}

// 组件内使用
<Image
   source={TopupImageMap[props.image] || TopupImageMap['default.png']} // 加兜底默认图避免报错
   style={styles.GridImage}
   resizeMode="contain"
/>

该方案适配iOS/Android双端，资源管理统一，适合图片数量不多的场景。

方案2：存入原生资源目录动态加载（适合图片量极大的场景） #

如果涉及的图片数量非常多，预定义映射表成本过高，可以把所有图片放到两端的原生资源目录：

• Android端：将图片放入android/app/src/main/res/drawable目录，资源文件名只能包含小写字母、数字和下划线
• iOS端：将图片放入ios/项目名/Images.xcassets目录

之后直接用uri动态加载即可：

<Image
   source={{uri: props.image.replace(/\.[^/.]+$/, "")}} // 去掉文件后缀即可
   style={styles.GridImage}
   resizeMode="contain"
/>

该方案不需要提前预引入所有资源，但需要分别在双端存放资源，注意资源名规则即可。

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