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

其中数据。image1.img 是文件名。

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

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

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

Answer 1

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

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

其中 'localImage' 是在父级中导入的，就像在下面的代码中一样，并作为 prop 传递给子级（您的组件）。

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。

无论您有多少图片，我都建议通过您的图片文件夹和 auto-generate 一个 Images.js 类型的文件向运行编写一个简单的脚本。这并不难，而且会为您节省大量工作，特别是如果您在开发过程中定期添加或删除图像，那么您不必每次都手动更新它。

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

React Native: How to make modular components using local image and data assets?

javascript

reactjs

react-native

react-native-android

create-react-native-app