React Native WebView与Web应用通信时避免页面重载的方案

嘿，我之前踩过一模一样的坑！别再用window.postMessage给Native发消息了——这玩意儿在react-native-webview里确实会触发window.location变更导致页面重载，完全破坏Web端的路由。咱们用组件官方提供的专属通信方法就没问题，全程不会动到页面URL，也不会重载。

核心思路：用WebView注入的全局对象发消息 #

react-native-webview组件会自动在Web端的全局环境注入一个window.ReactNativeWebView对象，它的postMessage方法是专门为Native通信设计的，不会触发任何页面跳转或重载。

1. Native端配置（接收Web消息） #

首先在你的React Native代码里，给WebView绑定onMessage回调，用来接收Web端发来的消息：

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const MyWebView = () => {
  const webViewRef = useRef(null);

  // 处理来自Web的消息
  const handleWebMessage = (event) => {
    const messageData = JSON.parse(event.nativeEvent.data);
    console.log('收到Web端消息:', messageData);
    // 这里可以写你的业务逻辑，比如更新Native状态、调用原生模块等
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你的Web应用地址' }}
      onMessage={handleWebMessage}
      // 要是你的Web应用是本地静态资源，用source={{ html: '<html>...</html>' }}也一样
    />
  );
};

export default MyWebView;

2. Web端发送消息（无重载） #

在你的Web应用代码里，直接调用window.ReactNativeWebView.postMessage()发送消息就行，记得把消息序列化成字符串（Native端会收到字符串，需要解析）：

// 比如在Web端的某个按钮点击事件里
const sendMessageToNative = () => {
  const message = {
    type: 'USER_ACTION',
    payload: { id: 123, content: 'Hello from Web!' }
  };
  // 必须转成字符串，Native端才能正确解析
  window.ReactNativeWebView.postMessage(JSON.stringify(message));
};

为什么之前的方法不行？ #

你之前用的window.postMessage是浏览器标准API，但在React Native的WebView环境中，它的实现有兼容性问题——会被误触发成修改window.location的操作，导致页面重载。而window.ReactNativeWebView.postMessage是组件专门封装的通信通道，走的是Native和WebView之间的原生通信桥，完全不会碰页面的URL或路由。

额外补充：双向通信的完整流程 #

既然你已经知道Native怎么给Web发消息，这里再确认下完整流程：

• Native → Web：调用webViewRef.current.postMessage('消息内容')，Web端通过document.addEventListener('message', (e) => { /* 处理消息 */ })接收
• Web → Native：用上面说的window.ReactNativeWebView.postMessage()，Native端通过onMessage回调接收

亲测这个方案完全不会触发页面重载，Web端的路由状态也能完美保留。

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