React Native自带组件介绍

ListView 组件介绍

http://taobaofed.org/blog/2015/12/09/using-js-to-build-an-crossplatform-native-app-an-introduction-to-listview/

分页

除了简单的渲染之外，另外一个要考虑的问题就是 当数据量很大的时候如何分页加载 。这种情形分两种情况考虑：

1. 数据一次性拿到，边滚动边加载
2. 数据不是一次性拿到，而是有可能分屏取数据

对于第一种情况，在 ListView 内部其实已经做了分页的处理：

• ListView 内部通过 curRenderedRowsCount 状态保存已渲染的行数；
• 初始状态下，要加载的数据条数等于 initialListSize（默认为 10 条）；
• 在滚动时检测当前滚动的位置和最底部的距离，如果小于 scrollRenderAheadDistance(默认为 1000)，就更新curRenderedRowsCount ，在它原有值基础上加 pageSize 个（默认为 1 条）；
• 由于属性变化，触发了 ListView 重新的 render 。在渲染过程中，curRenderedRowsCount 起到截断数据的作用，React 的 diff 算法使得只有新加入的数据才会渲染到了界面上。

整个过程类似于 Web 端懒加载机制，即 每次在和底部的距离达到一个阈值时，加载接下来的 pageSize 个数据 。

对于第二种情况，ListView 提供了相关的属性：

• onEndReachedThreshold，在滚动即将到达底部时触发；
• onEndReached，在已经到达底部时触发；

我们可以在这两个方法中调用接口去拿数据，取到数据后再更新数据源。