React-Native: упаковщик не обнаруживает изображения

Я не могу понять, как программно добавлять изображения в React-Native. У меня есть каталог /img, полный изображений, и файл json, data.json полный записей данных, которые имеют соответствующие пути к файлам изображений:

[
 {
  "id": "1",
  "img": "img1.png"
 },
 {
  "id": "2",
  "img": "img2.png"
 }
]

Я загрузил data.json в переменную с var data = require('data.json'), и я могу нормально обращаться к путям изображения через data[0].img. Кроме того, я могу создать теги Image, которые отображают изображения через <Image source={{uri = "./img/img1.png"}} style={styles.img}/>.

Однако, когда я пытаюсь объединить их с <Image source={{uri = "./img/" + data[0].img}} style={styles.img}/>, я получаю эту ошибку: Требуется неизвестный модуль "./img/img1.png". Если вы уверены, что модуль есть, попробуйте перезапустить упаковщик.

Я несколько раз перезапускал свой симулятор, часами искал здесь и в документации, чтобы понять, что я делаю неправильно. Любая помощь будет принята с благодарностью.


react-native image packager
person rycander    schedule 02.03.2016    source источник

Ответы (2)


arrow_upward
0
arrow_downward

У вас есть две "ошибки" в вашем коде: ключу объекта назначается не =, а :. И вы не можете комбинировать строки в этом случае, поскольку, насколько я знаю, в конечном итоге используется require() для изображений, и он не принимает ничего, кроме простых строк.

Я бы посоветовал вам сделать это следующим образом:

const assets = {
  img1: './img'+ data[0].img
}

...

<Image source={{uri: assets.img1} style={styles.img}/>
person Samuli Hakoniemi    schedule 02.03.2016

arrow_upward
1
arrow_downward

Вы не можете показывать локальные изображения таким образом.

Что вы можете сделать, так это следующее:

[
 {
  "id": "1",
  "img": require("./img/img1.png")
 },
 {
  "id": "2",
  "img": require("./img/img2.png")
 }
]

затем <Image source={data[0].img} style={styles.img} />

person G. Hamaide    schedule 02.03.2016