React Native使用数组元素引入图片报错，请求技术支持

React Native 的 Metro 打包器要求静态资源的 require 路径必须是编译时可静态解析的。当你使用 require("./assets/"+couleurs[1]+".png") 时，couleurs[1] 属于运行时动态计算的表达式，编译阶段 Metro 无法确定最终的资源路径，因此会触发报错。

而你用变量 col 时能运行，是因为 col 直接赋值为字面量 "jaune"，Metro 的静态分析可以推断出最终路径，但这种写法依赖打包器的特殊处理，一旦 col 是动态生成的（比如从状态、接口获取），同样会失效。

方案1：直接存储require结果到数组 #

把图片的 require 结果提前存入数组，直接通过索引获取资源：

export default function App(){
  const couleurs = [
    require("./assets/blanc.png"),
    require("./assets/jaune.png"),
    require("./assets/gris.png")
  ];

  return(
    <View>
      <Image source={couleurs[1]} />
    </View>
  );
}

方案2：用对象映射字符串与资源 #

如果需要通过字符串名称匹配图片，可以用对象建立映射关系：

export default function App(){
  const couleurImages = {
    blanc: require("./assets/blanc.png"),
    jaune: require("./assets/jaune.png"),
    gris: require("./assets/gris.png")
  };
  // 可以是动态获取的字符串，比如从状态或接口拿到的
  const selectedCouleur = "jaune";

  return(
    <View>
      <Image source={couleurImages[selectedCouleur]} />
    </View>
  );
}

这两种方式都能让 Metro 在编译阶段明确识别到需要打包的资源，避免动态路径导致的报错。

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