Изображение: динамический путь для локальных изображений

Question

Начинающий с React Native здесь.

Я работаю над небольшим приложением, которое должно отображать изображение в соответствии со случайным числом. Например, если я получил 203, я хочу отобразить изображение Project / img / 203.png (случайное число от 1 до 726)

Первое, что я попробовал, был require (dynamicPath), после прочтения документации я понял, что это не очень хороший способ сделать это, и я не хочу, чтобы каждое изображение 726 статически требовалось. Затем я попытался с синтаксисом URI:

//Executed from Project/components/ folder
loadImage(number){
  imgUri = '../img/'+number.toString()+'.png'  
  return(
    <Image source={{uri: imgUri}} />
)

Приложение запускается, но изображение не отображается (даже с установленным стилем высоты / ширины). Примеры, которые я видел с синтаксисом uri, касались изображений, полученных с веб-URL, поэтому я не уверен, что это позволяет получить его из локального хранилища, но я не могу найти другой способ получить изображение.

Answer 1

Корпус коммутатора является мусором. Используйте литералы шаблона.

loadImage(number){
  imgPath = `../img/${number.toString()}.png` 
  return(
    <Image source={require(imgPath)} />
)

Answer 2

Общее правило: вы не можете использовать динамическую строку для require (проверьте подробности в ссылке в комментарии Мухаммеда Мехара), поэтому вам нужно хранить все require d изображения в массиве:

const images = [
  require('../img/1.png'),
  require('../img/2.png'),
  ...
  require('../img/726.png'),
];

loadImage(number){
  return <Image source={images[number-1]} />
}

Конечно, вы можете сгенерировать строки кода для массива и скопировать его в редактор, чтобы сэкономить время.