动态需要 React Native 图像

我正在努力在我的反应原生项目中加入一些代表国家的旗帜。我发现你不能在 React Native 中动态地要求图像，如下例所示。

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

鉴于我发现的如此回应here https://stackoverflow.com/questions/30854232/react-native-image-require-module-using-dynamic-names我正在考虑创建一个带有 switch 语句的函数，当传递正确的标志代码时，该函数将返回所需的图像。像下面这样的东西。

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

我将收到超过 200 个案例提供此解决方案。有更好的方法来做到这一点吗？

由于手动要求所有图像会很麻烦，您可以添加将它们添加到您的应用程序图像资源中 https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources并要求他们通过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')
...

然后像这样引用它即可。

组件.js

import Flags from './Flags'

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