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

最新推荐文章于 2024-03-24 00:19:11 发布

轻量开发

最新推荐文章于 2024-03-24 00:19:11 发布

阅读量6k

点赞数

分类专栏： react-native，PanResponder react-native 文章标签： react-native FlatList onViewableItemsChanged

本文链接：https://blog.csdn.net/nfq6612/article/details/81666498

版权

本文详细探讨了ReactNative中的FlatList组件，重点在于如何使用onViewableItemsChanged属性来监听列表中可视项的变化。在滚动FlatList时，结合viewabilityConfig进行配置，可以实现对当前显示数据项的精确监控。文章提供了关键代码示例，并建议参考ViewabilityHelper源码以了解更多配置详情。

摘要由CSDN通过智能技术生成

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}
    Li