[原创］东方耀reactnative 视频29之-ListView组件

ListView组件是React Native中一个比较核心的组件，用途非常的广。该组件设计用来高效的展示垂直滚动的数据列表。最简单的API就是创建一个ListView.DataSource对象，同时给该对象传入一个简单的数据集合。并且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的参数是一个数组)，该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)

由于平台差异性，React Native 中的滚动列表组件 ListView 并没有直接映射为 android 中的 ListView 或 iOS 中的 UITableView，而是在ScrollView 的基础上使用 JS 做了一次封装。这样，滚动体验部分由 Native 负责，而 React 部分则专注于组件何时渲染、如何渲染等问题。

数据源默认的格式有三个维度：

第一个维度是 sectionId ，标识属于哪一段， 可以手动指定或隐式地使用数组索引或对象的 key 值；

第二个维度是 rowId ，标识某个数据段下的某一个行，同样可以手动指定或隐式地使用数组索引或对象的 key 值；

第三个维度是具体的数据对象，根据实际的需要而定。

需要注意的是，上面只是 默认的数据格式 ，如果它不符合实际的需求， 完全可以使用自定义的数据结构 。唯一的区别就是需要额外指定给 ListView 数据源中哪些是 id，哪些是 rowData。



DataSource 的构造函数接收以下4个参数（都是可选）：

rowHasChanged : 用于在数据变化的时候，计算出变化的部分，在更新时只渲染脏数据；

sectionHeaderHasChanged : 同理，在列表带分段标题时需要实现；

getRowData/getSectionHeaderData : 如果遵循默认的数据源格式，这两个方法就没有必要实现，用内部默认的即可；而当数据源格式是自定义时，需要手动实现这两个方法。

DataSource 的初始化一般在 constructor 方法中

数据源确定后，下一个工作就是列表的渲染。在渲染时发挥重要作用的是 renderRow 属性，它接收数据源中保存的数据对象，并通过返回值确定该行该如何进行展现。我们可以对所有行统一进行展现，也可以根据里面的字段做出不同的展现。在列表包含 sectionHeader 时，还需要实现 renderSectionHeader 方法。

注意

要更新datasource中的数据，请（每次都重新）调用cloneWithRows方法（如果用到了section，则对应cloneWithRowsAndSections方法）。数据源中的数据本身是不可修改的，所以请勿直接尝试修改。clone方法会自动提取新数据并进行逐行对比（使用rowHasChanged方法中的策略），这样ListView就知道哪些行需要重新渲染了。

React Native ListView sticky效果实现

dataBlob{The dataBlob is a data structure (generally an object) that holds all the data powering the ListView}：dataBlob 包含ListView所需的所有数据（section header 和 rows），在ListView渲染数据时，使用 getSectionData 和 getRowData 来渲染每一行数据。 dataBlob 的 key 值包含 sectionID + rowId



sectionIDs[]：用于标识每组section



rowIDs[]：用于描述每个 section 里的每行数据的位置及是否需要渲染。在ListView渲染时，会先遍历 rowIDs 获取到对应的 dataBlob 数据。



片段头sticky失效原因：

1.Found this out by accident, but if you put your ListView inside a ScrollView, the headers will not be sticky

2.iOS RCTScrollView implements sticky headers 而android没有

3.ListView的Android版本不支持sticky-header特性

4.用这个替代：https://github.com/emilsjolander/StickyScrollViewItems