使用分页的 FlatList，如何更改可见页面上的事件？

Question

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

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

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

onViewableItemsChanged 道具在可见项目的每一次变化上都会被调用，这不是我想要的，除非我跟踪项目所属的页面。

我正在寻找onViewablePageChanged 类型的回调。

关于如何实现这一点的任何想法？

Answer 1

我使用的解决方案是根据整个项目列表跟踪可查看项目，以确定可查看项目的“页”数。

通过使用pagingEnabled，列表将只显示页面。 然而，onViewableItemsChanged 会在对可查看项目的每次更改时被回调。通过将可查看项目与项目列表进行比较，可以确定 FlatList 在哪个“页面”上。

这需要知道可以在视图中显示多少项。要么根据布局计算，要么在 View 和 FlatList 渲染中设置。

这是一个例子：

onViewableItemsChanged = ({viewableItems}) => {

  // Get the first viewable item
  const firstViewableItem = viewableItems[0].key;

  // Get its index into the items
  const index = this.state.items.findIndex(item => item.key === firstViewableItem);

  // If the index is a multiple of the number of items displayable on the screen
  // by checking for a reminder on the modulo operation
  if ((index % NB_ITEMS_SCREEN) === 0) {

    // get page
    const currentPage = index / NB_ITEMS_SCREEN;
    if (currentPage !== this.state.currentPage) {
      // Do something and update currentPage in this.state
    }
  }
}

<FlatList
   data={this.state.items}
   horizontal={true}
   pagingEnabled={true}
   renderItem={({ item }) => <Text>{item.key}</Text>}
   onViewableItemsChanged={this.onViewableItemsChanged}
/>

看看这个小吃

https://snack.expo.io/@visto9259/flatlist-onviewableitemschanged-example

Answer 2

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

//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
        }}
     /> 
    ....
   )}