Question

我正在尝试动态设置图片网址。图像是本地存储的，其位置路径位于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 = require（item.images.main）; 替换为 var imageURL = require（“./ .. /images/items/Pizzas.jpg“）; 它完美地显示了图像。

造成这种情况的原因是什么？这是怎么做到的？

Answer 1

使用require（PATH）方法实际上使打包器尝试在打包期间解析图像，如果它只是查看变量就无法做到。我会尝试做：

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

Answer 2

在使用之前我们需要require图像。

像这样;

const image = require("../../assets/someImage.png");

<Image source={image} />

这件事对我有用。

Answer 3

它对我不起作用。这是我的代码

let sendImgUrl = ''
if (!this.state.text) {
  sendImgUrl ='./../assets/send_disabled.png';

}
else {
  sendImgUrl ='./../assets/send_enabled.png'; 

}

渲染

<Image source={{uri: sendImgUrl }}/>

在React Native

3 个答案: