在 ListView 中添加存储在 JSON 数组中的图像 - React Native答案

【问题标题】：Adding Images stored in JSON Array in a ListView - ReactNative在 ListView 中添加存储在 JSON 数组中的图像 - React Native
【发布时间】：2016-09-11 18:50:44
【问题描述】：

我无法在 ReactNative ListView 中显示存储在 JSON 数组中的图像。假设这是我的数据：

var data = [
  {
    id: 0,
    photo: '../images/test.png',
  },
  {
    id: 1,
    photo: '../images/test.png',
  },
  {
    id: 2,
    photo: '../images/test.png',
  },
]

然后，在我的课堂上，我首先需要数据（假设它被正确导出）：

var data = require("../data").data

然后对于数据源中的每个元素，我循环遍历 JSON 数组，并尝试显示图像：

<Image source={{uri:item.photo}} style={styles.photo}></Image>

但是，屏幕上没有显示任何内容。我知道数据被正确提取是因为其他文本字段（上面未显示）正确显示，例如：

<Text style = {styles.name}>{item.id}</Text>

这显示正确。此外，如果我尝试直接在源中要求图像，即

<Image source={require('../images/test.png')} style={styles.photo}></Image>

它工作正常。有谁知道为什么图像源在作为变量引用时没有拉动？

【问题讨论】：

是的，你不能那样做。 source:{{uri: blablabla}} 用于获取网络图像。对于本地图像，您需要它们。而且你不能给require 一个动态路径。路径必须是静态的。
但是我给出了一个静态路径，对吧？例如data[0].photo 是图片源需要引用的静态路径？
那将是，但是您正在将该路径动态地设置为要求，我认为这是不允许的。一种方法是，您可以将需求放入数据库中。
@AakashSigdel 是对的。对于一些解决方案，请参阅stackoverflow.com/q/36911856/1783214

标签： javascript ios json listview react-native

【解决方案1】：

你可以这样做：

var data = [
  {
    id: 0,
    photo: require('../images/test.png'),
  },
  {
    id: 1,
    photo: require('../images/test.png'),
  },
  {
    id: 2,
    photo: require('../images/test.png'),
  },
]

【讨论】：