如何在React Native中高效检测react-native-webview的Local Storage语言键变更

方案一：利用Storage事件监听+WebView消息通信 #

这是最通用的实时同步方案，无需修改业务代码的调用逻辑，能自动捕获所有language键的变更。

1. Web端（React应用）配置 #

在React应用的入口文件（如index.js）或全局组件中添加以下代码，监听localStorage变更并通知React Native：

// 初始加载时同步一次当前语言值
window.ReactNativeWebView.postMessage(JSON.stringify({
  type: 'LANGUAGE_CHANGE',
  value: localStorage.getItem('language')
}));

// 监听跨页面/同域下的storage变更
window.addEventListener('storage', (e) => {
  if (e.key === 'language') {
    window.ReactNativeWebView.postMessage(JSON.stringify({
      type: 'LANGUAGE_CHANGE',
      value: e.newValue
    }));
  }
});

// 重写localStorage.setItem，解决当前页面修改storage不触发事件的问题
const originalSetItem = localStorage.setItem;
localStorage.setItem = function(key, value) {
  const oldValue = this.getItem(key);
  originalSetItem.apply(this, arguments);
  // 手动触发storage事件
  window.dispatchEvent(new StorageEvent('storage', {
    key,
    newValue: value,
    oldValue,
    storageArea: this,
    url: window.location.href
  }));
};

2. React Native端配置 #

在WebView组件中监听消息，收到语言变更通知后更新AsyncStorage：

import React, { useCallback } from 'react';
import { WebView } from 'react-native-webview';
import AsyncStorage from '@react-native-async-storage/async-storage';

const SyncLanguageWebView = () => {
  const handleMessage = useCallback(async (event) => {
    try {
      const message = JSON.parse(event.nativeEvent.data);
      if (message.type === 'LANGUAGE_CHANGE' && message.value) {
        await AsyncStorage.setItem('language', message.value);
      }
    } catch (err) {
      console.error('语言同步失败:', err);
    }
  }, []);

  return (
    <WebView
      source={{ uri: '你的React应用访问地址' }}
      onMessage={handleMessage}
      // 根据实际需求配置权限，如本地文件需设置allowFileAccess={true}
    />
  );
};

export default SyncLanguageWebView;

方案二：业务代码主动通知（更轻量） #

如果Web端和React Native端由同一团队维护，可直接在修改language的业务逻辑中主动发送消息，省去监听逻辑：

Web端（React应用）修改语言时添加通知 #

// 示例：React应用中切换语言的函数
const switchLanguage = (newLang) => {
  localStorage.setItem('language', newLang);
  // 直接通知React Native
  window.ReactNativeWebView.postMessage(JSON.stringify({
    type: 'LANGUAGE_CHANGE',
    value: newLang
  }));
};

React Native端配置同方案一 #

复用方案一中的handleMessage回调和WebView配置即可。

注意事项 #

• 确保WebView与React应用同源，或已配置正确的跨域通信权限，否则postMessage可能无法正常工作。
• 消息需用JSON.stringify序列化，避免解析错误。
• 初始同步不可少，确保React Native端启动时能获取WebView当前的语言设置。

内容的提问来源于stack exchange，提问作者Ido Aviram