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

Posted 2023-03-15

【中文标题】<Image source=/> 为啥不能使用字符串变量？ （反应原生）

【英文标题】：Why can't string variable be used in <Image source=/>? (React Native)<Image source=/> 为什么不能使用字符串变量？ （反应原生）

【发布时间】：2016-07-14 05:35:50

【问题描述】：

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

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'. 

【问题讨论】：

react-native 不支持它。检查这个。 github.com/facebook/react-native/issues/…

【参考方案1】：

尝试在图像源中使用单个花括号。 并使用 require() 方法将图像路径存储在图像变量中。

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

【讨论】：

有效！但请检查原帖中的 EDIT ***。我正在努力实现这一目标，但仍然出现错误。

感谢@Srinivas Guni，它有效。 ***.com/questions/56797041/…

【参考方案2】：

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

但你可以这样做：

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

【讨论】：

你是救世主！成功了！