React Native中动态加载图片报错，寻求可行解决方案

我之前也踩过一模一样的坑！React Native里的require机制确实有局限性，它不支持动态拼接路径——因为Metro打包器在构建阶段需要提前静态扫描所有要打包的资源，像模板字符串这种动态生成的路径，它根本识别不了。而用uri加载本地相对路径也容易翻车，因为开发环境的相对路径和打包后的资源路径完全不匹配。

给你几个靠谱的解决办法：

方法一：静态映射所有图片（最推荐） #

提前把所有可能用到的图片用require静态引入，存到一个对象里，然后根据result.color的值匹配对应的图片：

// 先定义图片映射表
const CardImageMap = {
  green: require('../../imagens/cardsgreen.png'),
  yellow: require('../../imagens/cardsyellow.png'),
  purple: require('../../imagens/cardspurple.png'),
  // 把剩下的2张图片也按这个格式加进来
};

// 组件里直接使用
<Image source={CardImageMap[result.color]} />

这个方法绝对稳，因为所有require都是静态写死的，打包器能正确收集到所有图片资源，而且使用起来也简单。注意要确保result.color返回的字符串和对象里的key完全一致（比如都是小写），如果有大小写不一致的情况，可以加个转换：CardImageMap[result.color.toLowerCase()]。

方法二：将图片放到平台资源目录（适合裸RN项目） #

如果你的项目是裸React Native（非Expo），可以把图片放到Android的res/drawable目录或者iOS的Images.xcassets里，然后用uri直接引用图片名称：

// Android和iOS通用（注意图片名称要和资源目录里的一致）
<Image source={{ uri: `cards${result.color}` }} />

不过这个方法需要你手动把图片放到对应平台的资源目录，还要处理不同分辨率的图片版本（比如Android的hdpi、xhdpi等），相对麻烦一点，适合需要大量本地图片的场景。

为什么之前的方法会失败？ #

• 关于require：Metro打包器只认静态字符串参数，require(../../imagens/cards${result.color}.png)这种动态路径写法，打包器根本找不到对应的资源，自然加载失败。
• 关于uri：本地相对路径在RN开发环境中不会被正确解析，因为打包后图片会被转移到特定的资源文件夹，原来的相对路径已经失效了，除非你配置复杂的资源打包规则，反而得不偿失。

内容的提问来源于stack exchange，提问作者Pedro Martins Melo