如何检测React Native应用程序的react-native-webview中的本地存储变化

Question

我正在开发一个React Native应用程序，它通过react-native-webview合并了React应用程序。我的目标是将 Web 视图本地存储中的语言键更改与 React Native 应用程序中的异步存储同步。

这是当前设置：

1. React Native App：这是主要应用程序。
2. React 应用程序：在 React Native 应用程序中的react-native-webview 内运行。

我需要检测 Web 视图本地存储中的语言键何时发生变化，并随后相应地更新 React Native 应用程序中的异步存储。

我尝试通过在 React 本机应用程序中设置时间间隔（使用注入的 JS）来定期检查本地存储中的更改。这种方法确实成功地检测到变化，但我知道使用间隔不是有效的方法，也不是实现此目的的最有效方法。我正在寻找更优化的方法。

Answer 1

当语言更改时，从 React 应用程序向本机端发送消息。

window.ReactNativeWebView.postMessage(JSON.stringify({language: "en"}))

然后在本机端监听变化。

<WebView
...
  onMessage={(event) => {
    const data = JSON.parse(event.nativeEvent.data)
  }}
/>

详情请参阅doc。