动态要求React Native图片

Question

动态要求React Native图片

3

我正在为我的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个案例。是否有更好的方法来处理？

- Cameron Barker

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BradByte · Accepted Answer

由于手动要求所有图像将变得非常繁琐，所以您可以将它们添加到您的应用程序图像资源中，并通过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

（组件.js）

import Flags from './Flags'

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