ReactiveNative:如何使用本地映像和数据资产制作模块化组件？

Question

创建-反应性-本机应用程序v1.0.0

反应-本机-cli 2.0.1

react本机0.52.0

Android 25

我在./src/data中有几个JSON文件(别名为数据)，在./src//映像中有图像(别名为图像)。

我正在做一个列表的图像，是可过滤和排序的基础上相应的数据。此外，我有不同类型的图像，用户可以切换之间的紧凑和扩展视图。

从我的搜索来看，我的计划是不可能从数据对象属性动态引用图像路径，我需要这样做：

import image1 from 'images/'image1.png';
import image2 from 'images/'image2.png';
<Image source={some_expression ? image1 : image2} />

或

<Image source={some_expression ? 
   require('images/image1.png') : require('images/image2.png')} />

这适用于切换，但我仍然有一个原始问题，无法从数据对象中实际分配image1和image2，例如：

var image1 = "images/" + data.image1.img

其中data.image1.img是文件名。

是否有一种方法可以在可重用组件中动态引用本地映像以获取相应的数据？

如果没有为每个数据对象的图像对单个组件进行硬编码，我将不知所措。

我是新的反应和移动在一般情况下，所以我可能忽略了一些东西，在文件或在线搜索。

Answer 1

对于任何有相同问题的人，下面是我使用JSON数据中的一个字符串来引用相应的图像来动态更改所显示的内容的方法。

在Images.js中，导入所有静态图像：

const images = {
  img1: require('images/img1.png'),
  imgNth: require('images/imgNth.png')
}

export default images;

或者另一种

import _img1 from 'images/img1.png';
import _imgNth from 'images/imgNth.png';

const images = {
  img1: _img1,
  imgNth: _imgNth
}

export default images;

然后在您想要使用它们的地方，即App.js

import images from 'images/Images';
import data from 'data/Data';

<Image source = {images[data[index].imgName]} />

其中，imgName是一个属性，它包含与导入图像中的一个属性完全相同的字符串值，即本例中的img1或imgNth。

不管您有多少图像，我建议编写一个简单的脚本来运行您的图像文件夹，并自动生成一个Images.js类型文件。这并不难，而且会为您节省大量的工作，特别是如果您在开发期间定期添加或删除图像，这样您就不必每次手动更新它。

Answer 2

您可以在组件的父组件中导入本地映像，并将其用作支柱。

<Image source={this.props.localImage} />

其中'localImage‘是导入父级的，如下面的代码所示，并作为支柱传递给子(您的组件)。

import localImage from 'images/some-image.png';

这将保持可重用性，并完美地工作。