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