1

create-react-native-app v1.0.0
react-native-cli 2.0.1
react-native 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 和移动设备的新手，所以我可能忽略了文档或在线搜索中的某些内容。

4

2 回答 2

0

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

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

其中“localImage”在父级中导入，如下面的代码所示，并作为道具传递给子级（您的组件）。

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

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

于 2018-02-16T06:51:17.927 回答
0

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

于 2018-02-18T01:11:05.120 回答