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 по-прежнему будет вызываться каждый раз при прокрутке. Это дает вам дополнительную гибкость, но снижает нагрузку на ЦП. Для немного лучшей производительности вы можете добавить это:

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