Добавление изображений, хранящихся в массиве JSON, в ListView - ReactNative

Question

У меня возникли проблемы с отображением изображений, хранящихся в массиве JSON, в ReactNative ListView. Скажем, это мои данные:

var data = [ 
    { 
    id: 0, 
    photo: '../images/test.png', 
    }, 
    { 
    id: 1, 
    photo: '../images/test.png', 
    }, 
    { 
    id: 2, 
    photo: '../images/test.png', 
    }, 
] 

Тогда, в моем классе, сначала я требую данных (предположим, что он экспортируется правильно):

var data = require("../data").data 

Тогда для каждого элемента в источнике данных, я петлевой через массив JSON и попытайтесь отобразить изображение:

<Image source={{uri:item.photo}} style={styles.photo}></Image> 

Однако на экране ничего не отображается. Я знаю, что данные тянут через правильно, потому что другие текстовые поля (не показано выше) дисплей должным образом, например:

<Text style = {styles.name}>{item.id}</Text> 

Это показывает правильно. Также, если я попытаюсь потребовать изображение непосредственно в источнике, то есть

<Image source={require('../images/test.png')} style={styles.photo}></Image> 

Он отлично работает. Кто-нибудь знает, почему источник изображения не тянет, когда ссылается как переменная?

Answer 1

Вы можете сделать это следующим образом:

var data = [ 
 
    { 
 
    id: 0, 
 
    photo: require('../images/test.png'), 
 
    }, 
 
    { 
 
    id: 1, 
 
    photo: require('../images/test.png'), 
 
    }, 
 
    { 
 
    id: 2, 
 
    photo: require('../images/test.png'), 
 
    }, 
 
]