如何在不同的可见性百分比下检查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
  }
];