React Native Webview。如何在onScroll上触发一次功能？

Question

我想在滚动位置上触发重载功能。我设置了下面的代码，当contentOffset.y小于-180时触发重载，但由于contentOffset.y的位置一直在变化，所以它被多次触发。

我如何确保重载只被触发一次？

_onScroll = (event) => {
  if (event.nativeEvent.contentOffset.y < -180) {
    this.webView.ref && this.webView.ref.reload();
    console.log("Triggered multiple times as event.nativeEvent.contentOffset.y is keep changing")
  }
};

这是WebView获取滚动位置的地方。

<WebView
  bounces={true}
  onScroll={this._onScroll}
/>

Answer 1

你需要一种方法来告诉你的组件你已经运行了滚动重载，然后只运行重载函数，如果它之前没有被运行。最好的方法是在组件的状态下进行。

_onScroll = (event) => {
  if (event.nativeEvent.contentOffset.y < -180) {
    !this.state.scrollReloaded && this.webView.ref && this.webView.ref.reload();
    this.setState({ scrollReloaded: true });
  }
};

上面的解决方案可行，但性能不高。_onScroll 仍然会在我们每次滚动时被调用。这给你提供了额外的灵活性，但对CPU比较苛刻。对于 稍微 更好的性能你可以加这个。

<WebView
  bounces={true}
  onScroll={e => !this.state.scrollReloaded && this._onScroll(e)}
/>