React Native踩坑之FlatList組件中的onEndReached

最近在做一個RN項目，有使用到FlatList這樣一個RN封裝的組件去做上拉加載更多功能，在iOS和Android平台上，總結了以下幾個遇到的問題及解決方案

1. 進入頁面onReached開始就被觸發

解決方案：

// 偽代碼如下
<FlatList 
      ...  
     onEndReachedThreshold={0.5}
      ...
/>

當onEndReachedThreshold設置大於1時，的確進入頁面就觸發，設置在0-1之間時按正常邏輯走

2. 上拉加載更多onReached被觸發兩次，造成重復請求資源，性能浪費

解決方案：

<FlatList
    ...
    onEndReached={() => {
	if (this.canLoadMore) {
		this.loadData(true); //
		this.canLoadMore = false;
	}
    }}
    onEndReachedThreshold={0.5}
    onMomentumScrollBegin={() => {
	this.canLoadMore = true; //初始化時調用onEndReached的loadMore
    }}
    ...
/>

這是一個官方的問題，在github上我們可以查到有人提了這個issue，目前一個解決方案就是我們可以通過設置一個flag去控制這個問題，當第一次觸發完畢之后，將這個flag設置為false，避免重復去執行我們需要做的action操作

3. 通常情況下是先調用onMomentumScrollBegin，然后調用onEndReached，但是可能會存在意外情況

解決方案：

<FlatList
    ...
    onEndReached={() => {
	setTimeout(() => {
		if (this.canLoadMore) {
			this.loadData(true);
			this.canLoadMore = false;
		}
	}, 100)
    }}
    onEndReachedThreshold={0.5}
    onMomentumScrollBegin={() => {
	this.canLoadMore = true; //初始化時調用onEndReached的loadMore
    }}
    ...
/>