React Native WebView中onMessage属性未触发问题求助

兄弟，我看你在React Native里集成WebView后，注入的JS用window.postMessage发消息，但onMessage没触发对吧？我帮你梳理几个最常见的排查点和解决办法：

1. 最容易忽略的：给WebView加上onMessage属性！ #

你的代码里只写了injectedJavaScript，但onMessage是接收消息的核心回调，必须显式添加到WebView组件上：

render() {
  const injectedJs = `
    var elements = document.querySelectorAll("input[type=submit]");
    elements[0].addEventListener("click", function() {
      window.postMessage("Button1");
    });
    elements[1].addEventListener("click", function() {
      window.postMessage("Button2");
    });
  `;

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: this.state.authURL }}
        bounces={true}
        style={{flex: 1}}
        injectedJavaScript={injectedJs}
        // 必须加上这个回调！
        onMessage={(event) => {
          console.log('收到WebView消息:', event.nativeEvent.data);
          // 这里处理Button1/Button2的业务逻辑
        }}
      />
    </View>
  );
}

2. 注入JS的时机不对：页面还没加载完就找元素 #

如果页面还没完全渲染，document.querySelectorAll("input[type=submit]")可能找不到元素，导致监听事件根本没挂上。你可以改成在页面加载完成后再注入JS：

render() {
  const injectedJs = `
    var elements = document.querySelectorAll("input[type=submit]");
    console.log('找到的提交按钮数量:', elements.length); // 调试用
    if(elements.length >=2) {
      elements[0].addEventListener("click", function() {
        window.postMessage("Button1");
      });
      elements[1].addEventListener("click", function() {
        window.postMessage("Button2");
      });
    }
  `;

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: this.state.authURL }}
        bounces={true}
        style={{flex: 1}}
        onLoadEnd={() => {
          // 页面加载完成后再注入JS
          this.webViewRef.injectJavaScript(injectedJs);
        }}
        onMessage={(event) => {
          console.log('收到消息:', event.nativeEvent.data);
        }}
        // 给WebView加ref，方便调用injectJavaScript
        ref={(ref) => this.webViewRef = ref}
      />
    </View>
  );
}

3. 调试确认：看看注入的JS到底有没有执行 #

你可以用Chrome的调试工具查看WebView的控制台输出：

• 打开Chrome浏览器，输入chrome://inspect
• 找到你的React Native应用对应的WebView，点击inspect
• 就能看到WebView页面的控制台，检查console.log('找到的提交按钮数量:', elements.length)的输出，确认元素是否存在，JS是否执行

4. 版本兼容：确保用的是最新的react-native-webview #

现在官方已经不再维护内置的WebView，推荐使用第三方库react-native-webview。如果你还在用旧的内置WebView，可能会有API差异。建议安装最新版：

npm install react-native-webview
# 或者 yarn add react-native-webview

然后导入：

import { WebView } from 'react-native-webview';

5. 消息格式：确保发送的是字符串 #

虽然你现在发的"Button1"已经是字符串，但有些版本的WebView对postMessage的参数要求严格，你可以试试用JSON.stringify包裹，然后在onMessage里解析：

// 注入的JS里修改
window.postMessage(JSON.stringify("Button1"));

// onMessage里解析
onMessage={(event) => {
  const message = JSON.parse(event.nativeEvent.data);
  console.log('解析后的消息:', message);
}}

按照上面的步骤排查，应该能解决onMessage不触发的问题！

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