为什么不能在<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与任何资源文件一起使用是一种特殊情况。不常见javascriptrequire。打包程序必须知道在构建应用程序时（在执行任何代码之前）需要什么图像以将其替换为 资源 ID 。所以参数不能是可变的，必须是常量。

但你可以简单地做：

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

Why can't string variable be used in <Image source={}/>? (React Native)