react-native - 如何在 native react 中检测 View 是否在视口(viewport)或窗口中可见？

Question

我想要一个类似的功能，就像 react visibility sensor ，但在 native react 中。我有一个包含多个项目的平面列表(每个项目都有不同的高度)。我想检测一个特定的项目(比如说第 5 个项目)是否进入视口(viewport)以及它什么时候出去

Answer 1

您可以使用 onViewableItemsChanged 检查哪个 viewableItems在屏幕上。

这是一个虚拟类示例:

class Demo extends Component {
  constructor() {
    super();
    this.viewabilityConfig = {
      viewAreaCoveragePercentThreshold: 95
    }
  }
  onViewableItemsChanged = ({ viewableItems }) => {
    // viewableItems will show you what items are in view
  }
  render() {
    <FlatList
      ...
      onViewableItemsChanged={this.onViewableItemsChanged}
      viewabilityConfig={this.viewabilityConfig}
    />
  }
} 

您需要修改 viewAreaCoveragePercentThreshold 因此。