Реагировать Native Добавление изображений из файла данных

Question

У меня есть некоторые статические данные, как это:

{ 
    "title": "Book an Appointment", 
    "image": "../img/icon_booking.png" 
    }, 
    { 
    "title": "Client Gallery", 
    "image": "icon_gallery.png" 
    }, 
    { 
    "title": "Save Before/After Photos", 
    "image": "icon_gallery.png" 
    }, 

Я создаю представление списка и хотите передать соответствующее изображение в окне просмотра списка ячейки. ListView настроен следующим образом:

<ListView 
    dataSource={this.state.dataSource} 
    renderRow={(data) => <MainListRow {...data} />} 
/> 

MainListRow является seutp следующим образом:

const BOOKING_ICON = require('./img/icon_booking.png'); 

const MainListRow = (props) => (
    <View style={styles.container}> 
    {props.image ? <Image source={{uri: props.image}} style={styles.photo} /> : null} 
    <Text style={styles.text}> 
     {`${props.title}`} 
    </Text> 
    </View> 
); 

export default MainListRow; 

Я понимаю, от других вопросов, что изображения должны быть определены перед вызовом их (пример: How can I conditionally include images in React Native Component?)

Я не могу понять, как заставить uri правильно работать, даже для одного изображения. В идеале я просто хочу передать изображение и заставить его работать. Я пробовал разные варианты пути, чтобы попытаться получить его правильно и соответствовать первоначальному требованию, но это не имеет никакого значения.

Answer 1

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

var data = [ 
    {id: 1, text: 'row 1', image: require('./img/icon_booking.png')}, 
    {id: 2, text: 'row 2'}, 
    {id: 3, text: 'row 3'}, 
    {id: 4, text: 'row 4'}, 
    {id: 5, text: 'row 5'}, 
    {id: 6, text: 'row 6'}, 
    {id: 7, text: 'row 7'}, 
    {id: 8, text: 'row 8'}, 
    {id: 9, text: 'row 9'}, 
    {id: 10, text: 'row 10'}, 
    ];