映像文件的react本机使用变量

对于任何了解react原生野兽的人来说，这应该会有所帮助：）

我过去也访问过几个网站，但发现越来越令人沮丧。直到我在这里读到这个网站。

这是一种不同的方法，但最终还是有回报的。基本上，最好的方法是将所有资源加载到一个地方。考虑以下结构

app  
   |--img
      |--image1.jpg
      |--image2.jpg
      |--profile
          |--profile.png
          |--comments.png
      |--index.js

在index.js中，您可以执行以下操作：

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} />
}

每个人都有不同的方法来达到目的，只需选择最适合你的。

Da Man-Q:这个答案是如何使用变量的

既然require只接受文本字符串，就不能使用变量、串联字符串等。是的，这仍然是一项艰巨的工作，但现在你可以做一些类似于OP的问题：

render() {
  var images = { test100: "image100" };
  return (
    <View>
      <Text>
       test {images["test" + "100"]}
      </Text>
    </View>
  );
}

在JS中，require语句在bundle时解析（当计算JS bundle时）。因此，不支持将变量表达式作为require的参数。

在需要资源的情况下，这就更加棘手了。当你有require('./someimage.png')时，React Native打包程序将设置所需的映像，然后将其与应用程序捆绑在一起，以便在应用程序运行时将其用作"静态"资源（事实上，在开发模式下，它不会将映像与应用程序绑定，而是从服务器提供映像，但这在你的情况下无关紧要）。

如果你想使用随机图像作为静态资源，你需要告诉你的应用程序捆绑该图像。你可以用几种方法做到这一点：

1） 将其添加为应用程序的静态资产，然后使用<Image src={{uri:'name_of_the_image_in_assets.png'}}/>引用（以下是如何将其添加到本地iOS应用程序）

2） 要求所有的图像都是静态的。形式为：

var randomImages = [
    require('./image1.png'),
    require('./image2.png'),
    require('./image3.png'),
    ...
];

然后在你的代码中你可以做：

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/>

3） 将网络图像与<Image src={{uri:'http://i.imgur.com/random.jpg'}}/> 一起使用

class ImageContainer extends Component {
   this.state ={
     image:require('default-img')
   }
    <View>
           <Image source={this.state.image} />
    </View>
}

在这个讨论的上下文中，我遇到了这样的情况，希望为特定背景动态分配图像。在这里，我像这个一样改变状态

this.setState({
  image:require('new-image')
})

我来到这个线程，寻找一种以动态方式添加图像的方法。我很快发现，向Image->require（）传递变量是不起作用的。

感谢DerpyNerd让我走上了正确的道路。

在一个地方实现资源后，我发现添加图像很容易。但是，我仍然需要一种方法来根据应用程序中不断变化的状态动态分配这些图像。

我创建了一个函数，它接受状态值中的字符串，然后返回与该字符串逻辑匹配的Image。

设置

图像结构：

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组件中，我导入了图像组件，如下所示：

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:中的值动态分配所需的图像

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

再次感谢DerpyNerd让我走上了正确的道路。我希望这个答案能帮助其他人

如果您有更多的文件，这里有一个简单而真正动态的解决方案（无需重命名或导入）

[不适用于Expo Managed]

虽然这个问题很老，但我认为这是一个更简单的解决方案，可能会有所帮助。但我对任何术语上的错误表示歉意，如果我犯了任何错误，请纠正我

我们可以将URI与用于ANDROID（和/或iOS）的原生应用程序资产一起使用，而不是使用REQUIRE在这里，我们将仅讨论安德

URI可以根据需要轻松操作，但通常它只用于网络/远程资产，但也适用于本地和本机资产。而require不能用于动态文件名和目录

步骤

1. 从包含App.js或index.js 的目录中打开android/app/src/main/assets文件夹，如果assets文件夹不存在，请创建一个
2. 在assets中创建一个名为images或任何您选择的NAME的文件夹，并将所有图像粘贴到那里
3. 在包含App.js或index.js的主应用程序文件夹中创建一个名为react-native.config.js的文件
4. 将这些行添加到新的js文件中：

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./assets/YOUR_FOLDER_NAME/'],
};

在YOUR_FOLDER_NAME的位置使用新创建的文件夹的名称images或任何给定的NAME

5. 现在从主应用程序文件夹在终端中运行npx react-native link，这将链接/添加android捆绑包中的资产文件夹。然后重新生成调试应用程序
6. 从现在起，您可以在react原生应用程序中访问android/app/src/main/assets中的所有文件。例如：

<Image
   style={styles.ImageStyle}
   source={{ uri: 'asset:/YOUR_FOLDER_NAME/img' + Math.floor(Math.random() * 100) + '.png' }}
/>