<Image source={}/> 为什么不能使用字符串变量？ （反应原生）

Question

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

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

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

但它一直说错误：

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

但是当我直接在 require() 中输入：'../img/image1.jpg' 时，它就可以工作了。

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

编辑***

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

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

然后在我的 renderRow() 中，我试图实现类似以下的内容，因此它会根据数据源进行更新：

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。打包者必须知道在构建 应用程序时（在执行任何代码之前）将需要什么图像以将其替换为资源 ID。所以参数不能是可变的，必须是常数。

但你可以这样做：

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