我正在努力在我的 React Native 项目中加入一些标志来代表国家。我发现你不能在 React Native 中动态地要求像下面的例子那样的图像。
require(`../assets/flags/32/${countryCode}.png`)
因此，鉴于我在这里找到的 SO 响应，我正在考虑创建一个带有 switch 语句的函数，该函数将在传递正确的标志代码时返回所需的图像。像下面这样的东西。
export const Flags = (countryCode) => {
switch (countryCode) {
case 'US':
return require('../assets/flags/32/US.png');
....
}
};
鉴于此解决方案，我将有 200 多个案例。有没有更好的方法来做到这一点？
由于手动获取所有图像会很麻烦，您能否将它们添加到您的应用程序图像资产中并通过uri?
<Image source={{uri: 'flags/32/'+countryCode}} style={{width: 32, height: 32}} />
除此之外，我认为您的建议是唯一的其他解决方案。
标志.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}} />