動態需要React Native圖像

Question

我正在努力在我的反應原生項目中包含一些標志來代表國家。 我發現你不能動態地要求像下面的例子中的圖像做出反應原生。

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

所以考慮到我在這里找到的SO響應，我想創建一個帶有switch語句的函數，該函數在傳遞正確的標志代碼時會返回所需的圖像。 像下面這樣的東西。

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

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

Answer 1

由於手動要求所有圖像的繁瑣程度，您可以將它們添加到App圖像資源並通過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}} />