动态需要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}} />