FlatList是一个功能强大的组件, 但是强大的同时它也带来了很多坑.
FlatList在上拉滑动FlatList时理论上应该先执行onMomentumScrollBegin, 然后执行onEndReached.但是因为组件本身的问题, 无法保证onMomentumScrollBegin会在onEndReached前执行, 这时候有两个解决办法:
// 第一种解决办法
onEndReached={() => {
if (this.canLoadMore) {
this.loadData(true);
this.canLoadMore = false;
}
}}
onScrollBeginDrag={() => {
this.canLoadMore = true;
}}
虽然onMomentumScrollBegin不能准时执行, 但是onScrollBeginDrag通常可以在onEndReached回调前执行.
如果在使用中发现onScrollBeginDrag也出现问题, 那么可以使用第二种方法
// 第二种方法
onEndReached={() => {
setTimeout(() => {
if (this.canLoadMore) {
this.loadData(true);
this.canLoadMore = false;
}}, 100)
}}
onScrollBeginDrag={() => {
this.canLoadMore = true;
}}
相对于第一种方法, 这种方式稍显丑陋了一点, 但是作为一个实现者来说, 这个方法简单高效.
