React JS向RN WebView传值时postMessage无法触发onMessage

按以下优先级排查修复，基本能覆盖90%以上的同类问题： #

1. 替换为官方维护的社区版WebView #

React Native 0.6版本之后内置的WebView组件已经完全废弃，不会注入window.ReactNativeWebView桥接对象，必须替换为社区维护版本：

• 安装依赖：
  npm install react-native-webview 或 yarn add react-native-webview
• 替换导入语句：
  import { WebView } from 'react-native-webview';

2. 修复前端调用逻辑 #

你当前的前端代码有两个问题：

• window.ReactNativeWebView.postMessage是同步方法，不返回Promise，不需要加await
• 桥接对象会在WebView页面加载完成后才注入到window上，页面初始化阶段直接调用会因为对象不存在报错，自然无法触发onMessage回调
  替换前端代码为带重试检测的版本：

const sendToRN = (message) => {
  let retry = 0;
  const sendInterval = setInterval(() => {
    if (window.ReactNativeWebView) {
      window.ReactNativeWebView.postMessage(JSON.stringify(message));
      clearInterval(sendInterval);
    }
    retry += 1;
    if (retry > 10) clearInterval(sendInterval);
  }, 300);
}

// 需要传数据的时候调用即可，比如按钮点击事件里触发
// 不要在React组件useEffect/ComponentDidMount里直接立刻调用
sendToRN("Hello!");

如果需要传递结构化数据，建议用JSON.stringify序列化后再传，接收端再parse，避免数据格式异常 #

3. 补全WebView必要配置 #

你当前的WebView配置缺失几个关键属性，直接替换为以下配置：

<View style={styles.container}>
  <WebView
    source={{ uri: '你的Netlify站点地址' }}
    ref={webViewRef}
    onMessage={(event) => { 
      console.log("收到WebView消息"); 
      const data = event.nativeEvent.data;
      alert(data);
    }}
    style={styles.view}
    originWhitelist={['*']}
    javaScriptEnabled={true}
    // 安卓端必须开启DOM存储，否则桥接可能失效
    domStorageEnabled={true}
    // 提前注入兼容脚本，避免桥接对象挂载时机问题
    injectedJavaScriptBeforeContentLoaded={`
      window.postMessage = function(data) {
        window.ReactNativeWebView?.postMessage(data);
      };
      true;
    `}
    allowsInlineMediaPlayback
    scalesPageToFit
    mediaPlaybackRequiresUserAction={false}
    useWebkit
    startInLoadingState={true}
    renderLoading={Spinner}
    geolocationEnabled={true}
    // 调试阶段开启，方便定位WebView内部报错
    onError={(e) => console.warn('WebView加载错误:', e.nativeEvent)}
  />
</View>

4. 部署环境校验 #

因为页面托管在Netlify，需要检查两个配置：

• 站点响应头不要带X-Frame-Options: DENY/X-Frame-Options: SAMEORIGIN，否则WebView嵌入会限制脚本执行
• 确保访问地址是HTTPS协议，iOS端ATS规则会拦截HTTP地址的桥接调用

验证方法 #

先在网页上加一个手动触发的按钮，点击时调用sendToRN方法测试，不要在页面加载时自动触发，排除时机问题。如果仍然不触发，在网页端控制台打印window.ReactNativeWebView，如果值为undefined，说明桥接未注入，回到第一步检查依赖版本和配置。

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