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

Question

我不知道如何在 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”。如果您确定模块在那里，请尝试重新启动打包程序。

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

Answer 1

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

我鼓励你这样做：

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

...

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

Answer 2

您不能通过这种方式显示本地图片。

您可以执行以下操作：

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

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

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

React-Native: packager not detecting images

image

packager

react-native