Показать локальные изображения в React-Native NativeBase

Это работает, если я покажу изображение следующим образом:

<Thumbnail source= {require('../images/01.jpg')} />

Но не работает:

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

person.id происходит из массива people. Печать в <Text>{person.id}</Text> дает вывод как 01 или 02.

Как показать локальное изображение с именем в качестве prop.value?

Я попытался:

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />

и

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

Оба завершаются с ошибкой: Безымянный именованный модуль: '../images/1.jpg' введите описание изображения здесь


react-native reactjs native-base
person Somename    schedule 01.09.2017    source источник
comment
Это изображение, которое вы пытаетесь запросить, доступно перед упаковкой приложения? Я имею в виду, например, когда это изображение устанавливается пользователем во время выполнения, требование не будет работать, и вам нужно использовать ‹Thumbnail source={{ uri: 'file://path/to/saved/image' }} / ›. Проверьте это обсуждение здесь: github.com/facebook/react-native/issues/6391.   -  person Patrik Prevuznak    schedule 02.09.2017
comment
Все изображения уже находятся в папке с изображениями, и я несколько раз перепаковывал приложение.   -  person Somename    schedule 02.09.2017

Ответы (3)


arrow_upward
14
arrow_downward

То, чего вы пытаетесь достичь, на самом деле невозможно.

Упаковка происходит один раз перед выполнением, поэтому переменная person.id еще не имеет значения.

Это уже обсуждалось здесь.

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

По сути, вам нужно импортировать все возможные файлы, которые вы собираетесь использовать.

Простой подход:

var firstImage = require('../images/01.jpg');
var secondImage =  require('../images/02.jpg');  
var myComponent = (whichImageToUse) ? firstComponent : secondComponent;

Изощренный подход: создайте файл, в котором должны быть все изображения.

allImages.js

export default {
    '01': require('../images/01.jpg'),
    '02': require('../images/02.jpg'),
    // import all other images
}

Импортируйте этот файл, где вам нужно использовать изображение, и получите доступ к отдельному изображению следующим образом:

import images from '../images/allImages'
<Thumbnail source={images[person.id]} />
person Patrik Prevuznak    schedule 02.09.2017
comment
Спасибо. Я хотел это для тестирования. Работает как шарм. Большое спасибо! - person Somename; 09.09.2017

arrow_upward
1
arrow_downward

Это сработает, если убрать фигурные скобки из person.id:

<Thumbnail source= {require('../images/'+ {person.id} +'.jpg')} />

Как это:

<Thumbnail source= {require('../images/'+ person.id +'.jpg')} />

или это (с использованием литералов шаблона es6):

<Thumbnail source= {require(`../images/${person.id}.jpg`)} />
person Cesar William Alvarenga    schedule 01.09.2017
comment
Спасибо. Для обоих я получаю сообщение об ошибке: Ошибка: Безымянный именованный модуль: '../images/1.jpg' Отредактировал вопрос и добавил ошибку. - person Somename; 02.09.2017

arrow_upward
1
arrow_downward

Заменяющим компонентом NativeBase Thumbnail является изображение React-Native.

Если вы добьетесь этого с помощью React Native Image, а не с помощью NativeBase Thumbnail, то это проблема с NativeBase.

Этот вопрос уже обсуждался в выпусках React Native

#2481, #6391, #10290

person Supriya Kalghatgi    schedule 04.09.2017
comment
Спасибо @Supriya .. Я последовал совету Патрика, и это сработало. - person Somename; 09.09.2017