Listview 从数据文件添加图像

我有一些静态数据如下：

{
    "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} />}
/>

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;

}
/>

MainListRow是seutp，如下所示：

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

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;

const BOOKING_ICON=require（'./img/ICON_BOOKING.png'）；
常量MainListRow=（道具）=>(
{props.image？：null}
{`${props.title}`}
);
导出默认MainListRow；

我从其他问题中了解到，在调用图像之前需要定义它们（例如：）

---

我不知道如何获取uri以使图像正常工作，即使是对于一个图像。理想情况下，我只想把图像传进来，让它工作。我尝试了不同的路径变体，试图使其正确并符合最初的要求，但没有任何区别。

根据评论，我能够更改我的数据结构，只需要那里的图像：

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'},
    ];

---

尝试直接在数据文件中要求图像，如

“image”：require（../img/icon\u booking.png”）

，然后像

@Cherniv一样使用它-谢谢，我想这可能只是一种特定的方式，请作为答案提交。