浅析Listview组件01之最简实例

前言：Navigator简单告一段落（复杂的以后再慢慢整，实际上是目前整不出来），接下来捣鼓捣鼓ListView，这也是个大家都会用到的重量级组件。这玩意儿因为说明比较少，所以好多初学者都整得来简单的，但稍微改点需求就有点凌乱了。尤其是偶尔还要掺杂Navigator一起上，外加上那个坑爹的this在捣乱，就更加懵比了。所以我打算和Navigator那样，从最简单的例子开始，慢慢加需求完成代码，同时慢慢分析坑点，争取理解透，免得摔坑里半天爬不起来。

最简demo

老规矩：demo地址
这个最简demo是从官方文档里面抄的。

界面很丑，将就看了，ListView像这样调用的：

<ListView
           dataSource={this.state.dataSource}
            renderRow={(rowData) => <Text>{rowData}</Text>}
 />

通过上面代码我们可以看出，一个ListView组件至少需要两个东西。一个是数据源dataSource，一个是每行的渲染组件renderRow。
首先是数据源dataSource，它需要一个创建好的ListView.DataSource的实例，创建代码如下：

let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3'])}

先new出一个ListView.DataSource（里面那个rowHasChanged一会再说，先抄着用）的实例。使用该实例的cloneWithRows方法创建出需要的dataSource。cloneWithRows方法的参数就是你真正的数据，这个数据的格式一般是个数组，或者字符串也行（一般不会用这个……）。数组中的每个值，就是ListView每行能够调用的值。
然后是renderRow，顾名思义，就是渲染一行（或生成一行）。也就是说，数据源提供了n行的数据，然后我这个renderRow就把每行的数据拿出来，变成一行行组件，然后从上到下排列出来给大家看。所以renderRow需要一个能返回组件对象的函数方法，比如我这里就返回一个最简单的Text组件，然后函数的参数可以使用以下这几个：rowData, sectionID, rowID, highlightRow。demo中使用了rowData，表示每行的数据对象（就是之前数组里面的一个值），剩下的参数等会用到再说。

换一种说法就是，我有一坨数据（数组），通过上面的DataSource方法以及cloneWithRows方法变成了Listview能够调用的数据源，然后再使用renderRow方法一行行渲染成界面给大家看。

好了，最简单的ListView已经搭出来了，接下来一边加内容一边解释之前没说到的东西。