image - 在 React Native 中动态更改图像 URL

Question

我正在尝试动态设置图像 URL。图像存储在本地，它们的位置路径位于 JSON 文件中。

JSON 文件

{
  "total": 2,
  "categories": [
    {
      "id": "cat1",
      "name": "Burgers",
      "itemCount": 10,
      "images":{
        "main":"./../images/items/Burgers.jpg"
      }
    },
    {
      "id": "cat2",
      "name": "Pizzas",
      "itemCount": 5,
      "images":{
        "main":"./../images/items/Pizzas.jpg"
      }
    }
  ]
}

代码

renderItem: function (item) {
    var imageURL = require(item.images.main);
    return (
        <View style={styles.mainContainer}>
            <Image source={imageURL} style={styles.image}>
                <Text style={styles.textMain}>{item.name}</Text>
            </Image>
        </View>
    );
}

这给出了以下错误。

2015-12-10 16:02:45.295 [错误][tid:com.facebook.React.RCTExceptionsManagerQueue] 未处理的 JS 异常:需要未知模块“./../images/items/Burger.jpg”。如果您确定该模块在那里，请尝试重新启动打包程序。

但是如果我替换 var imageURL = 需要(item.images.main)； 与 var imageURL = require("./../images/items/Pizzas.jpg"); 它完美地显示了图像。

这是什么原因造成的？如何正确执行？

Answer 1

使用 require(PATH) 方法实际上使打包程序在打包过程中尝试解析图像，如果它只是查看变量，它就无法做到这一点。我会尝试做:

<Image source={{uri: image.images.main}} />