FlatList是ReactNative高效能的簡單列表元件。本文只探討onViewableItemsChanged屬性使用，這裡不過多介紹，官方文件https://reactnative.cn/docs/flatlist/。

1.需求背景：FlatList列表滾動時，監聽當前那些資料item在可見範圍內。這時就需要FlatList的onViewableItemsChanged。使用onViewableItemsChanged要與viewabilityConfig繫結使用。

2.onViewableItemsChanged和viewabilityConfig官方說明

onViewableItemsChanged
在可見行元素變化時呼叫。可見範圍和變化頻率等引數的配置請設定viewabilityconfig

viewabilityConfig
請參考ViewabilityHelper
的原始碼來了解具體的配置。

3.關鍵程式碼使用參考：

3.1、FlatList配置 

<FlatList
    refreshing={this.state.refreshing}
    data={this.state.list}
    extraData={this.state}
    renderItem={this.createListItem}
    ItemSeparatorComponent={_itemSeparator}
    ListFooterComponent={this.listFooter}
    //ListHeaderComponent={this.listHeader}
    //ListEmptyComponent={_listEmpty}
    onRefresh={this.Refresh}
    onEndReachedThreshold={_onEndReachedThreshold}
    onEndReached={this.loadMore}
    onViewableItemsChanged={this._onViewableItemsChanged}
    viewabilityConfig={VIEWABILITY_CONFIG}
/>
 

3.2viewabilityConfig

//列表滾動變化監聽配置
const VIEWABILITY_CONFIG = {
	minimumViewTime: 300,
	viewAreaCoveragePercentThreshold: 10,
	waitForInteraction: true,
};

3.3 onViewableItemsChanged={ this._onViewableItemsChanged}

在_onViewableItemsChanged方法裡面處理你想要的內容。具體可以看console.log列印的資料changed

//列表滾動變化事件
_onViewableItemsChanged = (changed) => {
	   console.log(changed);
    }
};