React-Native 官方组件FlatLis 关于属性onEndReached、onEndReachedThreshold的几点使用总结

FlatList组件为什么依然这么难用

官方提供的这款List组件相比于上一个版本的ListView来说已经优化很多了，但是，还是不能称之为一个成熟的组件。

onEndReached、onRefresh两个属性的引入说明官方确实是想将下拉刷新、上拉加载的模式引入这个组件，但是从目前的现状来看，这两方面做的都差钱人意，那我们就来对这个组件进行一定的改造，来满足我们正常的开发需求。

上拉加载

我看到很多朋友发帖说这个组件如何难用，onEndReached和
onEndReachedThreshold这两个属性总是会出现莫名其妙的问题，说白了就是onEndReached方法的触发场景不是我们期待的，今天花了半天的时间进行了长列表的分页请求测试总结出来了以下几点经验

• FlatList在界面渲染的时候(初始化)的时候大部分情况下data属性是InitialValue(空数组)，这时候onEndReached方法会被触发，我们需要过滤这种情况，比如以数据源的length为过滤条件。。。
• onEndReachedThreshold参数最好设置为0.1或者0.2这样，也比较符合大部分软件的设计模式
• 分页网络请求PageSize的确定，这个参数数值的确定可能需要考虑到服务端的设计以及数据量的因素，但是今天我们只讨论如何能让分页功能稳定运行。大致满足如下规律

/**
* 假设FlatList的窗口高度为WindowHeight，PageSize条数据对应的内容高度为ContentHeight
*/
if（ContentHeight > (1 + onEndReachedThreshold) * WindowHeight）{
	console.debug("function named onEndReached will work well.");
}

下拉刷新

由于FlatList提供的refreshControl属性不支持组件的自定义，只能在固定的样式上改改颜色什么的，所以肯定不能满足商用项目的需求，所以我们需要做的是在FlastList的基础上进行封装，暴露出来可以供开发者使用的自定义入口，关于自定义组件这块的介绍我放在另一篇文章里面了，欢迎大家批评指正。

基于React Native官方组件FlatList，增加可定制化“下拉刷新”、“下拉加载更多”组件API的新列表组件react-native-refresh-loadmore-flatlist