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

создать-react-native-app v1.0.0
react-native-cli 2.0.1
react-native 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} />

or

<Image source={some_expression ? 
   require('images/image1.png') : require('images/image2.png')} />

Это работает для переключения, но у меня все еще есть исходная проблема, когда я не могу назначить image1 и image2 из моих объектов данных, таких как:

var image1 = "images/" + data.image1.img

где data.image1.img - имя файла.

Есть ли способ обойти это, где я могу динамически ссылаться на локальные изображения для соответствующих данных в повторно используемом компоненте?

Я в растерянности, если не считать жесткого кодирования отдельных компонентов изображениями для каждого объекта данных.

Я новичок в React и мобильных устройствах в целом, поэтому, возможно, я что-то пропустил в документации или в онлайн-поиске.


react-native reactjs javascript react-native-android create-react-native-app
person Steven H    schedule 16.02.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете импортировать свои локальные изображения в родительский элемент вашего компонента и использовать его в качестве опоры.

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

Где localImage импортируется в родительский объект, как в приведенном ниже коде, и передается в качестве опоры дочернему элементу (вашему компоненту).

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

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

person Community    schedule 16.02.2018
comment
Спасибо за эту информацию. Это не совсем то, что я искал в данном случае, но он пригодится в будущем. - person Steven H; 18.02.2018

arrow_upward
0
arrow_downward

Для тех, у кого такая же проблема, вот что я сделал, чтобы использовать строку из моих данных 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. Это несложно сделать и сэкономит вам много работы, особенно если вы регулярно добавляете или удаляете изображения во время разработки, поэтому вам не придется каждый раз обновлять их вручную.

person Steven H    schedule 18.02.2018