顯示在陣營本地NativeBase

它的工作原理，如果我表現出這樣的圖像本地圖片：顯示在陣營本地NativeBase

<Thumbnail source= {require('../images/01.jpg')} />

，但未能上：

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

person.id來源於people數組。在<Text>{person.id}</Text>中打印它可以輸出爲01或02。

如何顯示名稱爲prop.value的本地圖像？

我想：

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />

和

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

兩個失敗，錯誤：未命名命名模塊： '../images/1.jpg'

來源

2017-09-01 Somename

是你正試圖要求打包應用程序之前可用的圖像？我的意思是當圖像例如由用戶在運行時設置時，則需求將不起作用，並且您需要使用。查看這裏的討論：https://github.com/facebook/react-native/issues/6391。 –

所有圖像已經在圖像文件夾中，我重新打包了幾次應用程序 – Somename

你正在嘗試實現的是不是真的有可能。

包裝發生一次運行前因此變量person.id還沒有價值。

這已經被討論here。

在討論中你可以看到解決這個問題的方法。

基本上你需要導入所有可能的文件你打算使用。

簡單的方法：

var firstImage = require('../images/01.jpg'); 
var secondImage = require('../images/02.jpg'); 
var myComponent = (whichImageToUse) ? firstComponent : secondComponent;

複雜的方法：創建需要的所有圖像文件。

allImages.js

export default { 
    '01': require('../images/01.jpg'), 
    '02': require('../images/02.jpg'), 
    // import all other images 
}

導入該文件，你需要使用的圖像，並訪問這樣的個人形象：

import images from '../images/allImages' 
<Thumbnail source={images[person.id]} />

來源

2017-09-02 19:10:54

謝謝。我想要這個測試。奇蹟般有效。非常感謝！ – Somename

它將工作如果您從person.id中刪除花括號：

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

像這樣：

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

或本（使用ES6模板文字）：

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />

來源

2017-09-01 20:49:07

謝謝。對於這兩個我得到一個錯誤：錯誤：未命名的命名模塊：'../images/1.jpg'編輯的問題，並添加了錯誤。 – Somename

更換NativeBase縮略圖的分量作出反應，原生的圖片。

如果您使用React Native Image而不是NativeBase縮略圖實現此目標，那麼NativeBase就是這個問題。

這個問題已經在的問題進行了討論陣營本地

#2481，#6391，#10290

來源

2017-09-04 08:16:27

謝謝@Supriya ..我遵循帕特里克的建議，它的工作原理。 – Somename

顯示在陣營本地NativeBase

回答

相關問題