如何以不同的可见性百分比检查FlatList中项目的可见性？

Question

我试图在React Native中的给定项目FlatList在2种不同情况下可见时对它执行操作：

1. 当项目可见10％时（执行淡入/缩放动画）
2. 当项目100％可见时（在屏幕上开始播放视频/音频）

从RN文档中，它指出无法更改viewabilityConfig按需。

如何才能做到这一点？谢谢。

Answer 1

我刚刚注意到，这FlatList需要一个名为viewabilityConfigCallbackPairs的道具，其格式未在https://facebook.github.io/react-native/docs/virtualizedlist.html#viewabilityconfigcallbackpairs进行完整记录

基本上，这是什么做的是，将采取与键/值对对象的数组viewabilityConfig和onViewableItemsChanged。这将允许您为每个不同的可见性配置定义任何处理程序。

例如：

<FlatList
    data={items}
    renderItem={this.renderItem}
    keyExtractor={(item) => item.id }
    refreshing={false}
    onRefresh={this.onRefresh}
    viewabilityConfigCallbackPairs={this.viewabilityConfigCallbackPairs}
/>

哪里this.viewabilityConfigCallbackPairs等于：

this.viewabilityConfigCallbackPairs = [{
    viewabilityConfig: {
      minimumViewTime: 500,
      itemVisiblePercentThreshold: 100
    },
    onViewableItemsChanged: this.handleItemsInViewPort
  },
  {
    viewabilityConfig: {
      minimumViewTime: 150,
      itemVisiblePercentThreshold: 10
    },
    onViewableItemsChanged: this.handleItemsPartiallyVisible
  }
];