React Native: Как создать модульные компоненты с использованием локальных ресурсов изображений и данных?

Question

Создать -реагировать-родной-приложение v1.0.0
Reaction-native-cli 2.0.1
реактивный род 0.52.0
Android API 25

У меня есть несколько файлов JSON в./src/data (с псевдонимом данных) и изображения в./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 импортируется в parent, как в приведенном ниже коде, и передается как реквизит для child (вашего компонента).

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

Это будет поддерживать возможность повторного использования и работает отлично.