React Native Webview:如何在Scroll上触发功能一次?

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")
}
};

这是它获得滚动位置的 Web 视图。

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