Требовать изображения динамически в React Native

Question

документации по Реагировать родной (0,21) состояний, что это возможно только, чтобы загрузить фотографии статически, то есть, если имя файла каким-то образом заранее известно:

Обратите внимание, что в Чтобы это работало, имя изображения в требовании должно быть известно статически.

Источник: https://facebook.github.io/react-native/docs/images.html#content

Приведен пример:

// GOOD 
<Image source={require('./my-icon.png')} /> 

// BAD 
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; 
<Image source={require('./' + icon + '.png')} /> 

К сожалению, в моем случае, я не знаю, имена файлов изображений заранее, так как они настроены в JSON файл.

Есть ли способ использовать local Файлы изображений в пределах реакции native? Я мог бы загрузить их через протокол file://, если бы я знал расположение файлов? Существует ли постоянная или переменная для местоположения приложения в файловой системе iOS?

Answer 1

Да, вы можете использовать изображения динамически. Тем не менее, они рассматриваются как сетевые изображения. Это означает, что упаковщик не приложил никаких метаданных изображения (ширина, высота).

Если у вас есть несколько изображений, просто используйте упаковщик.

// GOOD 
var icon = this.props.active ? require('./my-icon-active.png') : require('./my-icon-inactive.png'); 
<Image source={icon} /> 

Другой вариант - сохранить метаданные (ширину, высоту) в вашем JSON. Вам нужно указать, по крайней мере, высоту для сетевых изображений (или динамических изображений). Учитывая метаданные (ширина, высота) и размеры экрана с помощью (React.Dimensions), тривиально выбрать соответствующую высоту. Используйте react-native-orientation, если ваше приложение должно работать в портретном и альбомном режимах.