Динамическое требование Реагировать Собственные изображения

Question

Я работаю над включением некоторых флагов, чтобы представлять страны в моем собственном проекте. Я обнаружил, что вы не можете динамически запрашивать изображения, подобные примеру ниже, в ответном нативном.

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

Так дал SO ответ я нашел here я думал о создании функции с помощью переключателя заявления, что будет возвращать требуемое изображение назад, когда прошел правильный код флага. Что-то вроде ниже.

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

У меня будет более 200 случаев, учитывая это решение. Есть ли лучший способ сделать это?

Answer 1

Из-за того, насколько громоздким было бы вручную потребовать все изображения, можете ли вы добавить 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}} />