javascript - react native Webview : How to trigger function once on 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 仍然会在我们每次滚动时被调用。这为您提供了额外的灵 active ，但对 CPU 的要求更高。为了稍微更好的性能，您可以添加:

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