使用分页 FlatList，如何获取可见页面上的事件发生变化？

Question

我正在构建一个启用分页的简单水平 React Native FlatList：

<FlatList
   horizontal={true}
   pagingEnabled={true}
   data={...some data...}
   renderItem={({item}) => {...some rendering...}}
   onViewableItemsChanged={(info) => {... handling ...}}
 />

我希望仅在列表中的新页面可见后才能收到回电。我正在寻求的行为是，当用户左右滑动列表时，列表将翻阅项目，并且我希望回调对可见项目触发一次。

可见项目onViewableItemsChanged的每次更改都会调用道具，这不是我想要的，除非我跟踪项目所属的页面。

我正在寻找一种onViewablePageChanged回调类型。

关于如何实现这一目标有什么想法吗？

Answer 1

您可以使用下面的代码来实现可见的项目。尝试这个。

//Method to invoke when item change
onViewableItemsChanged = ({ viewableItems, changed }) => {
      console.log("Visible items are", viewableItems);
      console.log("Changed in this iteration", changed);
   }

render () => {
    return (
    ...
    <FlatList
        horizontal={true}
        pagingEnabled={true}
        data={...some data...}
        renderItem={({item}) => {...some rendering...}}
        onViewableItemsChanged={this.onViewableItemsChanged }
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50
        }}
     /> 
    ....
   )}