Загрузить изображение динамически, основанное на значении реквизита в реакции-native?

Question

В моей папке «img» у меня есть 5 папок: («Америка», «Европа», «Азия», «Африка», «Австралия»). Каждая из этих папок содержит несколько изображений города (например, в папке Европы будут размещены London.jpg, Paris.jpg, Rome.jpg и т. Д.)

Теперь мой редуктор возвращает мне 2 реквизита. Один представляет собой континент, а другой - город, который принадлежит континенту, хранящемуся в предыдущей опоре.

Что я хочу достичь - это динамически загружать изображение города.

что-то вроде этого:

var icon = (this.props.myContinent && this.props.myCity) ? 
     require('./img/'+{this.props.myContinent}+'/'+{this.props.myCity}+'.png'); 

<Image source={icon} /> 

Я прочитал this и this и они дали мне идею. Но я все еще не могу это решить.

Answer 1

Ваш код не работает, потому что имя изображения в require должен быть известен статически. Согласно docs:

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

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

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

Хотя это немного неудобно, это довольно легко реализовать. В вашем случае, я бы следующее:

const images = { 
    america: { 
     caracas: require('images/america/caracas.png'), 
     newyork: require('images/america/newyork.png') 
    }, 
    europe:{ 
     london: require('images/america/london.png'), 
     paris: require('images/america/paris.png') 
     rome: require('images/america/rome.png') 
    }, 
    asia:{ 
     // And so on... 
    } 
} 

Затем ваш icon инициализации должен выглядеть следующим образом:

var icon = (this.props.myContinent && this.props.myCity) ? images[this.props.myContinent][this.props.myCity] : null; 

И в render вы можете сделать что-то вроде этого. Механизм «& &» просто есть, чтобы проверить, если icon равно нулю:

{icon && <Image source={icon} />} 

Answer 2

Проблема заключается в том, что вы не используете тройное состояние должным образом. Вы используете ? без :. используйте некоторое изображение, если условие не выполняется.

Написать это так:

var icon = (this.props.myContinent && this.props.myCity) ? 
    require(`./img/${this.props.myContinent}/${this.props.myCity}.png`) 
    : require('./img/defaultImage.png'); 

<Image source={icon}/> 

Answer 3

Вы можете создать иконку компонента с объектом путей к изображениям, а затем в контейнер просто поставить название города в своем роде опору.

const paths = { 
    'paris': require('./img/europe/paris.png'), 
    'london': require('./img/europe/london.png'), 
} 


export default function Icon({ kind }) { 
    return (
    <Image 
     source={paths[kind]} 
    /> 
); 
} 

Затем в контейнере что-то вроде

<Icon kind={this.props.city} />