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

您可以在组件的父级中导入本地图像，并将其用作道具。

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

where＆＃39; localImage＆＃39;在父代中导入，如下面的代码中所示，并作为prop传递给child（您的组件）。

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

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

Answer 2

对于有相同问题的任何人，我这样做是为了使用我的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类型文件。这并不难，并且会为您节省大量工作，特别是如果您在开发过程中定期添加或删除图像，那么您不必每次都手动更新它。

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

2 个答案: