0

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

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

4

2 回答 2

1

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

您可以执行以下操作：

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

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

于 2016-03-02T10:22:18.787 回答
0

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

我鼓励你这样做：

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

...

<Image source={{uri: assets.img1} style={styles.img}/>
于 2016-03-02T07:54:23.130 回答