[教程] ListView的使用和封装——实战React Native中级案例01

前言

在开发过程中最常见的任务就是建立一个列表，无论是联系人列表或是商品目录等等。为了提高开发效率，这里我们将对ListView进行整理和封装，使得其使用变得方便快捷。

为了检验组件的可用性，我们将开发下图的示例。该程序包含一个列表，可在程序初始化后现实一个数组中的数据。在点击Add Item按键后，列表将会添加新的项目。

这里要注意的是，ListView的部分应进行适当的封装，使得同样的组建可以快速的用于联系人列表或购物清单等场景。

想象驱动开发 (Wish-driven Development)

和测试驱动开发类似，想象驱动开发指的是先想象你的代码开发完成后应该如何使用，然后再进行开发，直到代码能够实现你描述的功能。

我想只需要写X我的代码就能做到Y => 一直修改代码直至实现你的愿望

在这个例子中我们希望ListView可以这样使用：

// 代码仅用于展示概念，放到程序里运行不了不要找我
<MyListView data={
    this.state.data} row={<Row />} />

为了实现代码的高重用性，我们希望列表中的每一行的外观都由组建<Row />决定，方便随时调整，然后作为一个props传到组件中，同时我们还不希望对于数据进行管理，而仅仅传入一个数组，ListView就可以自动将数据分发给每个<Row />组件。而数组发生变更的时候，MyListView也应该自动更新。

处理dataSource和数据刷新

ListView的数据来自于dataSource，这个参数必须是一个ListView.DataSource对象。所以我们采用了这样的方法定义dataSource：
首先，定义一个MyListView类用来封装ListView：