React Native动态用变量require图片报错：This call is not symbolicated

问题根源 #

React Native的Metro打包器是静态分析机制，它需要在构建阶段就明确所有要打包的资源路径。用变量传进require()的话，编译时没法解析具体路径，就会报"This call is not symbolicated"错误；而硬编码字符串时，打包器能直接识别路径，所以可以正常导入图片。

解决方案 #

方案1：提前用require导入所有图片 #

把数组里的路径字符串换成直接用require导入的结果：

const exampleImagesIos = [
  require("./example-images/example-ios-1.png"),
  require("./example-images/example-ios-2.png")
]

<Swiper>
  {exampleImagesIos.map((item, i) => (
    <View key={i} style={styles.exampleImgContainer2}>
      <Image style={styles.exampleImgstyle2} source={item} />
    </View>
  ))}
</Swiper>

数组里存的是静态解析后的资源引用，map时直接使用即可。

方案2：用映射对象管理图片（适合多场景复用） #

如果需要通过标识动态获取图片，可以先建一个路径映射对象：

const imageMap = {
  'ios-1': require("./example-images/example-ios-1.png"),
  'ios-2': require("./example-images/example-ios-2.png")
}

// 使用示例
<Swiper>
  {['ios-1', 'ios-2'].map((key, i) => (
    <View key={i} style={styles.exampleImgContainer2}>
      <Image style={styles.exampleImgstyle2} source={imageMap[key]} />
    </View>
  ))}
</Swiper>

这种方式既能灵活管理图片资源，又能满足打包器的静态分析要求。

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