React-Native：包裝商未檢測到圖像

我無法弄清楚如何以編程方式在React-Native中添加圖像。我有一個目錄，/img，完整圖像，以及JSON文件，data.json充滿了具有相應的和圖像的文件路徑的數據條目的：React-Native：包裝商未檢測到圖像

[ 
{ 
    "id": "1", 
    "img": "img1.png" 
}, 
{ 
    "id": "2", 
    "img": "img2.png" 
} 
]

我已加載data.json入變量與var data = require('data.json')，我可以訪問圖像路徑通常通過data[0].img。此外，我可以創建Image標籤，通過<Image source={{uri = "./img/img1.png"}} style={styles.img}/>顯示圖像。

但是，當我嘗試將<Image source={{uri = "./img/" + data[0].img}} style={styles.img}/>與這兩者結合使用時，出現此錯誤：要求未知模塊「./img/img1.png」。如果您確定模塊在那裏，請嘗試重新啓動打包程序。

我已經重新啓動了我的模擬器多次，在這裏搜索和文檔幾個小時來找出我做錯了什麼。任何幫助將不勝感激。

來源

2016-03-02 rycander

您的代碼中有兩個「錯誤」：對象鍵未指定爲=，而是指定爲0。在這種情況下，你不能合併字符串，因爲AFAIK最終使用了require()用於圖像，並且它不接受任何除了普通字符串以外的其他字符。

我會鼓勵你做這樣的：

const assets = { 
    img1: './img'+ data[0].img 
} 

... 

<Image source={{uri: assets.img1} style={styles.img}/>

來源

2016-03-02 07:54:23 zvona

無法顯示本地圖片這種方式。

你可以做的是：

[ 
{ 
    "id": "1", 
    "img": require("./img/img1.png") 
}, 
{ 
    "id": "2", 
    "img": require("./img/img2.png") 
} 
]

然後<Image source={data[0].img} style={styles.img} />

來源

2016-03-02 10:22:18

React-Native：包裝商未檢測到圖像

回答

相關問題