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

Question

У меня есть папка с изображениями, скажем answers, где я храню ответ на мой вопрос, а именно изображения

На данный момент в этой папке 200 изображений.

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

Я генерирую ответы случайным образом

`var answer = getAnswers(data)` // some calculation for file name for answer

<Image source={require('../path/to/my/answer/' + answer + '.jpg')}

При этом я получаю ошибку `` require expect exactly 1 string literal argument

Я узнал, что строителю нужно знать местоположение перед тем, как строить. Но как решить этот тип проблемы.

Я не могу изначально сопоставить 200 файлов, требующих

var one = require('../path/one.jpg')
var two = require('../path/two.jpg')

Как я могу решить этот тип проблемы. Есть ли способ сделать это ??

Требуется помощь.

Answer 1

Динамический путь поиска в require просто невозможен.

Насколько я понимаю, у вас есть 2 варианта здесь:

1. Создать файл изображения

Вместо того, чтобы писать 200 строк вручную, вы можете создать скрипт, который просматривает вашу папку изображений и генерирует список URL-адресов изображений. Я бы предложил формат, похожий на:

// Images.js

export const Answers = { 
   ANSWER_ONE : require('../path/one.jpg'),
   ANSWER_TWO : require('../path/two.jpg'),
   ...
}

Тогда используйте это:

import {Answers} from './Images'

var answer = getAnswers(data)

<Image source={Answers[answer]} />

2. Скопируйте файлы изображений в папки ресурсов

Если вы выберете эту опцию, вы должны скопировать все файлы изображений в папку ресурсов для android и ios projects. Затем вы можете использовать их так:

var answer = getAnswers(data)

<Image source={{uri: '../path/to/my/answer/' + answer + '}} />

Подробнее об использовании графических ресурсов .

...

Хотя второй вариант кажется заманчивым, я бы предпочел первый в большинстве случаев. Главным образом потому, что второй требует, чтобы вы делали две копии каждый раз, когда добавляете изображение (при условии, что вы поддерживаете android и ios). Кроме того, вариант 1 дает вам лучшие варианты ввода текста, где вы не будете вводить название изображения с ошибкой.

Надеюсь, это поможет!