Question

如何在react-native

中实现此目的

require("../images/vehicles/" + this.state.proccessedFirstData.make + ".png")

make是我需要动态访问的对象属性，我一直在搜索，我找不到任何解决方案

我也试过

const IMAGE = require("../images/vehicles/" + this.state.proccessedFirstData.make + ".png")并且无效

Answer 1

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

如果需要资源，它会更加棘手。当您拥有require('./someimage.png')时，React Native packager将会定位所需的图像，然后它将与应用程序捆绑在一起，以便它可以用作＆＃34;静态＆＃34;应用程序运行时的资源（实际上在开发模式下，它不会将图像与您的应用程序捆绑在一起，而是图像将从服务器提供，但这在您的情况下并不重要）。

如果您想将随机图片用作静态资源，则需要告知您的应用将图片捆绑在一起。您可以通过以下几种方式实现：

1）将其添加为应用的静态资源，然后使用<Image src={{uri:'name_of_the_image_in_assets.png'}}/>引用它（here是如何将其添加到原生iOS应用中的方式）

2）静态地要求所有图像。 Sth的形式：

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

一起使用

ref from this link -- thanks @kzzzf

Answer 2

RN bundler是静态的，因此您必须在编译时导入所有资源。

您仍然可以进行半动态加载：

const car1 = require('<path>')
const car2 = require('<path>')
const cars = {car1, car2}

<image source={cars[this.state.car]}>

在react-native中加载动态资产

2 个答案: