为什么不能在<img source="{}/"/>中使用字符串变量？ （React Native）

Question

我正在尝试执行以下操作：

var itemImage = '../img/image1.jpg'

return(
        <Image
          source={require(itemImage)}
        />

但它一直在说错误：

Requiring unknown module '../img/image1.jpg'. 

但是当我直接输入：'../img/image1.jpg'在require（）里面时它就可以了。

可能是什么问题？任何指导或见解将不胜感激。

编辑***

我的构造函数中有以下内容作为我的dataSource：

this.state = {dataSource: ds.cloneWithRows([{name: '../img/item1.jpg'}, {name: '../img/item2.jpg'}])}

然后在我的renderRow（）中，我试图实现类似下面的内容，以便根据dataSource进行更新：

renderRow(rowData){
    var itemImage = require(rowData.name)

    return(
            <Image
              source={itemImage}
            />

但我仍然遇到同样的错误：

Requiring unknown module '../img/image1.jpg'. 

Answer 1

在图像源中使用单花括号尝试此操作。 使用require（）方法将图像路径存储在图像变量中。

render(){
    var image=require('../img/image1.jpg');
    return(
       <View >
           <Image source={image}/>
       </View>
      );
 }

Answer 2

将require与任何资源文件一起使用是一种特殊情况。这不是常见的javascript require。 Packager必须知道构建应用程序（在执行任何代码之前）需要什么图像才能用资源ID 替换它。所以参数不可变，必须是常数。

但你可以这样做：

{
   dataSource: ds.cloneWithRows([
       {image: require('../img/item1.jpg')},
       {image: require('../img/item2.jpg')}
   ])
}