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