React Native：如何使用本地图像和数据资产制作模块化组件？

Question

create-react-native-app v1.0.0
react-native-cli 2.0.1
反应原生 0.52.0
Android API 25

我在 ./src/data（别名为数据）中有几个 JSON 文件，在 ./src/assets/images 中有几个图像（别名为图像）。

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

从我的搜索看来，我计划从数据对象属性动态引用图像路径是不可能的，我需要执行以下操作：

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 是文件名。

有没有办法解决这个问题，我可以动态引用本地图像以获取可重用组件中的相应数据？

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

我是 React 和移动设备的新手，所以我可能忽略了文档或在线搜索中的某些内容。

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';

这将保持可重用性并完美运行。