React Native：require（）with Dynamic String？

Question

我已经阅读了几篇关于人们在使用React Native和require()函数时遇到的问题的帖子，例如：

动态（失败）：

urlName = "sampleData.json";
data = require('../' + urlName);

与静态（成功）：

data = require('../sampleData.json');

我已经阅读了一些线程，这是React Native中的一个错误，而在其他线程中，这是一个功能。

是否有一种新方法需要函数内的动态资源？

相关帖子（在React时间都相当老）：

• Importing Text from local json file in React native
• React Native - Dynamically List/Require Files In Directory
• React Native - Image Require Module using Dynamic Names
• React Native: how to use require(path) with dynamic urls?

Answer 1

正如我所听到的，react的require()只使用静态url而不是变量，这意味着你必须做require('/path/file')，看看这个issue on github和this one更多的替代解决方案，还有其他几种方法可以做到！例如

const images = {
profile: {
    profile: require('./profile/profile.png'),
    comments: require('./profile/comments.png'),
},
   image1: require('./image1.jpg'),
   image2: require('./image2.jpg'),
};

export default images;

然后

import Images from './img/index';

render() {
    <Image source={Images.profile.comments} />
}

来自这个answer

Answer 2

这是我的解决方案。

建立

文件结构：

app  
  |--src
    |--assets
      |--images
        |--logos
          |--small_kl_logo.png
          |--small_a1_logo.png
          |--small_kc_logo.png
          |--small_nv_logo.png
          |--small_other_logo.png

        |--index.js
    |--SearchableList.js

在index.js，我有这个：

const images = {
  logos: {
    kl: require('./logos/small_kl_logo.png'),
    a1: require('./logos/small_a1_logo.png'),
    kc: require('./logos/small_kc_logo.png'),
    nv: require('./logos/small_nv_logo.png'),
    other: require('./logos/small_other_logo.png'),
  }
};

export default images;

在我的SearchableList.js组件中，然后我导入了像这样的Images组件：

import Images from './assets/images';

然后我在我的组件中创建了一个新函数imageSelect：

imageSelect = network => {
  if (network === null) {
    return Images.logos.other;
  }

  const networkArray = {
    'KL': Images.logos.kl,
    'A1': Images.logos.a1,
    'KC': Images.logos.kc,
    'NV': Images.logos.nv,
    'Other': Images.logos.other,
  };

  return networkArray[network];
};

然后在我的组件render函数中，我调用这个新的imageSelect函数，根据this.state.network中的值动态分配所需的Image：

render() {
  <Image source={this.imageSelect(this.state.network)} />
}

传递给imageSelect函数的值可以是任何动态字符串。我只是选择先将它设置在状态然后传入。

我希望这个答案有所帮助。 :)

Answer 3

您使用的是像webpack这样的模块捆绑器吗？

如果是这样，你可以尝试require.ensure()

见：https://webpack.js.org/guides/code-splitting/#dynamic-imports

Answer 4

如果需要在多个本地存储的图像之间切换，也可以使用以下方式：

        var titleImg;
        var textColor;
        switch (this.props.data.title) {
        case 'Футбол':
            titleImg = require('../res/soccer.png');
            textColor = '#76a963';
            break;
        case 'Баскетбол':
            titleImg = require('../res/basketball.png');
            textColor = '#d47b19';
            break;
        case 'Хоккей':
            titleImg = require('../res/hockey.png');
            textColor = '#3381d0';
            break;
        case 'Теннис':
            titleImg = require('../res/tennis.png');
            textColor = '#d6b031';
            break;
        }

在这个片段中，我根据道具改变变量titleImg和textColor。我把这个片段直接放在render()方法中。

Answer 5

通过文档阅读，我找到了一个可行的答案，我可以使用动态图像，在他们称之为网络图像的文档中

https://facebook.github.io/react-native/docs/images#network-images

不确定这是否可以应用于其他文件类型，但是因为它们列出需要非图像类型

你需要使用uri：call

data = {uri: urlName}

对我来说，我得到了动态的图像

<Image source={{uri: image}} />