React Native Webview：如何在 onScroll 上触发 function？

Question

我想在滚动 position 上触发重新加载 function。 我设置了下面的代码以在 contentOffset.y 小于 -180 时触发重新加载，但随着 contentOffset.y 的 position 不断变化，它被多次触发。

如何确保仅触发一次重新加载？

_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，它在其中获得了滚动 position。

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

Answer 1

您需要一种方法来告诉您的组件您已经运行了滚动重新加载，然后如果之前没有运行过重新加载 function，则只运行它。 最好的方法是在组件的 state 中：

_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)}
/>