如何检测视图在本机的视口或窗口中是否可见？

Question

我想要一个类似的功能，就像react 可见性传感器一样，但是在 react-native 中。我有一个包含多个项目的平面列表（每个项目都有不同的高度）。我想检测特定项目（比如第 5 个项目）是否进入视口以及何时退出

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。