動態需要React原生圖像

我正在努力在我的反應本地項目中包含一些標誌來代表各國。我發現你不能動態地要求像下面這個例子那樣的圖像來反應本地。動態需要React原生圖像

require(`../assets/flags/32/${countryCode}.png`)

所以給出的SO的響應，我發現here我想創建一個開關語句時傳遞正確的標誌代碼，將返回所需的圖像回功能。像下面的東西。

export const Flags = (countryCode) => { 
switch (countryCode) { 
    case 'US': 
    return require('../assets/flags/32/US.png'); 
    .... 
} 
};

鑑於此解決方案，我將擁有超過200個案例。有沒有更好的方法來做到這一點？

來源

2016-11-19 Cameron Barker

由於手動要求所有圖像有多繁瑣，您可以添加them to your App image assets並通過uri要求它們嗎？

<Image source={{uri: 'flags/32/'+countryCode}} style={{width: 32, height: 32}} />

除此之外，我認爲你的建議是唯一的其他解決方案..你可以通過使它成爲一個JS模塊稍微清理它。

Flags.js

exports.US = require('../assets/flags/32/US.png') 
exports.UK = require('../assets/flags/32/UK.png') 
exports.FR = require('../assets/flags/32/FR.png') 
exports.JP = require('../assets/flags/32/JP.png') 
...

然後，只需引用它，像這樣。

Component.js

import Flags from './Flags' 

<Image source={Flags[countryCode]} style={{width: 32, height: 32}} />

來源

2016-11-19 13:38:08

感謝布拉德這有助於。 –

動態需要React原生圖像

回答

相關問題