1

我搜索了堆栈，似乎没有人根据我想要实现的目标提出这个问题。我正在通过一个数组进行映射，我想将映射变量的名称作为图像的源，即我将它与.jpg

这是我在下面尝试的，但它带来了这个错误calls torequire expect exactly 1 string literal argument, but this was found:require('./' + herb.name + '.jpg') .，我可能做错了什么

 const herbs = this.state.record.map((herb) =>
 <View key={herb.id} style={BackStyles.herb_box}>
 <Image style={BackStyles.image} source={require('./'+herb.name+'.jpg')}/>
 <View style={{flexDirection: 'column',}}><Text style={BackStyles.header}>{herb.name}</Text> <Text style={BackStyles.sub}>{herb.bot}</Text></View>
            </View>
        );
4

1 回答 1

3

这是行不通的，因为图像需要预先静态知道，所以解析器知道从哪里加载资产。

为了使其工作，必须静态知道 require 中的图像名称。

更多信息在这里

var imageMap = {
    "herb1":  require('path.to.img.jpg'),
    "herb2":  require('path.to.img.jpg'),
};
<Image style={BackStyles.image} source={imageMap[herb.name]}/>

您可以尝试的其他选项是使用uri属性
您可以使用uri属性在项目的资源文件夹中定义动态图像。

<Image source={{uri: `${herb.name}.jpg`}} />
于 2018-07-23T10:03:59.557 回答