ReactNative之FlatList之onViewableItemsChanged深度挖掘与研究

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);
    }
};