Question

我正在努力在我的反应原生项目中包含一些标志来代表国家/地区。我发现你不能动态地要求像下面的例子那样的图像反应原生。

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

所以考虑到SO响应，我发现here我正在考虑创建一个带有switch语句的函数，该语句在传递正确的标志代码时会返回所需的图像。像下面的东西。

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}} />

动态需要React Native图像

1 个答案: