React-Native：打包程序未检测到图像答案

【问题标题】：React-Native: packager not detecting imagesReact-Native：打包程序未检测到图像
【发布时间】：2016-03-02 18:22:18
【问题描述】：

我不知道如何在 React-Native 中以编程方式添加图像。我有一个目录，/img，里面装满了图片，还有一个 json 文件，data.json 里面有对应的和图片文件路径的数据条目：

[
 {
  "id": "1",
  "img": "img1.png"
 },
 {
  "id": "2",
  "img": "img2.png"
 }
]

我已经将data.json加载到了var data = require('data.json')的变量中，我可以通过data[0].img正常访问图片路径。另外，我可以创建Image 标签，通过<Image source={{uri = "./img/img1.png"}} style={styles.img}/> 显示图像。

但是，当我尝试将两者与<Image source={{uri = "./img/" + data[0].img}} style={styles.img}/> 结合使用时，我收到此错误：需要未知模块“./img/img1.png”。如果您确定该模块在那里，请尝试重新启动打包程序。

我已经多次重启了我的模拟器，在这里搜索了几个小时的文档，以找出我做错了什么。任何帮助将不胜感激。

【问题讨论】：

标签： image react-native packager

【解决方案1】：

您不能以这种方式显示本地图像。

你可以做的是：

[
 {
  "id": "1",
  "img": require("./img/img1.png")
 },
 {
  "id": "2",
  "img": require("./img/img2.png")
 }
]

然后<Image source={data[0].img} style={styles.img} />

【讨论】：

【解决方案2】：

您的代码中有两个“错误”：对象键未分配给=，而是分配给:。在这种情况下你不能合并字符串，因为 AFAIK，最终使用 require() 来处理图像，它不接受除纯字符串之外的任何其他内容。

我鼓励你这样做：

const assets = {
  img1: './img'+ data[0].img
}

...

<Image source={{uri: assets.img1} style={styles.img}/>

【讨论】：