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

Question

В моем приложении React Native у меня есть компонент, который содержит Image, source которого я хочу зависеть от входной опоры. Я пробовал следующие два метода:

<Image source={require('@images/'+this.props.image+'.png')}/>

и

<Image source={require(this.props.image === 'a' ? '@images/a.png' : '@images/b.png')}/>

, но оба выдают ошибки. Может кто-нибудь сказать мне, что не так с этими кусками кода? Единственное другое решение, которое я могу придумать, - это

<Image source={require(this.props.image)}/>

и передать путь к изображению как опору, но я предполагаю, что есть более чистое решение.

Answer 1

Нет способа загружать статически c изображение динамически в реагировать нативно. Таким образом, вы должны загрузить все изображения stati c, которые вы хотите использовать. Для этого вы можете создать переменную, которая будет содержать изображение, которое вы можете использовать после загрузки. Например:

const imageA = require('@images/a.png');
const imageB = require('@images/b.png');

, затем, когда вы хотите использовать изображение:

<Image source={this.props.image === 'a' ? imageA : imageB )}/>

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

Answer 2

Вы видите такую ​​ошибку, потому что согласно React-Native, все ваши источники изображений должны быть загружены до компиляции вашего пакета. Вы можете узнать больше о изображениях

Вы можете решить эту проблему, используя следующий подход

let icon = this.props.image === 'a'
    ? require('./images/a.png')
    : require('./images/a.png');

<Image source={icon} style={{ width: 40, height: 40 }} />;

Надеюсь, это поможет вам. Не стесняйтесь сомнений.