动态需要React原生图像

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

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

所以给出的SO的响应，我发现here我想创建一个开关语句时传递正确的标志代码，将返回所需的图像回功能。像下面的东西。

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

鉴于此解决方案，我将拥有超过200个案例。有没有更好的方法来做到这一点？

来源

2016-11-19 Cameron Barker

由于手动要求所有图像有多繁琐，您可以添加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}} />

来源

2016-11-19 13:38:08

感谢布拉德这有助于。 –

动态需要React原生图像

回答

相关问题