需要一個包含本機變量的變量

Question

我正在與本機反應，我正在為我的按鈕創建一個類。 該按鈕包含圖像。 在這里，我已經減速了我的按鈕。

var imageUrl = { //this is a var from a JSON object there could be more than 20 different images 
          normal: "../assets/images/emoticons/1.png",
          selected: "../assets/images/emoticons/1-selected.png"
}

<Button key={index}
        selected={true}
        onPress={onSelect}
        imageUrl={imageUrl} />

在“按鈕”類中，我創建了一個_renderImage函數，用於在按鈕中設置圖像。

_renderImage(imageUrl){
    let image = (selected === true) ? require(imageUrl.normal) : require(imageUrl.selected); //get the right image url

    console.log('../assets/images/emoticons/1.png'); //logs  '../assets/images/emoticons/1.png'
    console.log(typeof('../assets/images/emoticons/1.png')); //logs string
    console.log(image); //logs '../assets/images/emoticons/1.png'
    console.log(typeof(image)); //logs string

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

}

此函數給出錯誤。 在此處的屏幕截圖中，您可以看到錯誤。

當我手動設置<Image source= require('../assets/images/emoticons/1.png)} />它將渲染圖像。 因此圖像存在於此位置。

像這樣的類似問題不能解決我的問題： 在React Native中需要圖像模塊有麻煩

Answer 1

根據文檔，我認為這在React Native中目前是不可能的：

請注意，為了使此功能起作用，必須靜態知道require中的圖像名稱。

來自https://facebook.github.io/react-native/docs/images.html