如何从React Native WebView加载的Laravel项目向WebView发消息？

一、消息发送无效的原因及修复方案 #

你的代码无法触发React Native端Toast，核心问题集中在这几点：

1. 消息格式不符合要求 #

React Native WebView的onMessage仅接收字符串格式的消息，直接传递JS对象会被自动转为[object Object]，导致解析失败。必须用JSON.stringify()将数据转为字符串后发送。

2. 错误使用window.parent.postMessage #

React Native WebView并非iframe嵌套场景，window.parent指向的上下文不对，直接使用window.postMessage即可，建议指定目标源（生产环境替换为你的实际域名，开发环境用*）。

3. React Native端未配置消息监听 #

必须在WebView组件中添加onMessage属性，才能接收前端发送的消息。

修复后的前端代码（Laravel侧）：

$.ajax({
    type: 'POST',
    url: "{{ route('register-step-seven') }}",
    data: $("#step-7 form").serialize(),
    success: function (data) {
        if ($.isEmptyObject(data.error) && $.isEmptyObject(data.password_error)) {
            if(data.data){
                // 转成字符串后发送消息
                window.postMessage(JSON.stringify(data.data), '*');
            }

            // 跳转逻辑建议调整，见下文说明
            setTimeout(function (){
                window.postMessage(JSON.stringify(data.data), '*');
                window.location.href = "{{route('dashboard')}}";
            }, 1000);
        } else {
            if (data.error) {
                printErrorMsg(data.error);
            }
        }
    }
});

React Native端配置示例：

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

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

    const handleMessage = (event) => {
        try {
            // 解析收到的字符串消息
            const messageData = JSON.parse(event.nativeEvent.data);
            // 替换为你的Toast逻辑
            Alert.alert('收到消息', JSON.stringify(messageData));
        } catch (e) {
            console.error('消息解析失败:', e);
        }
    };

    return (
        <WebView
            ref={webViewRef}
            source={{ uri: '你的Laravel页面URL' }}
            onMessage={handleMessage}
            javaScriptEnabled={true}
        />
    );
};

export default AppWebView;

二、发送消息后立即跳转的有效性问题 #

直接跳转大概率会导致消息发送失败。因为postMessage是异步执行的，调用window.location.href会立即终止当前页面的所有脚本执行，消息可能还没来得及发送到React Native端就被中断。

如果必须跳转，推荐两种可靠方案：

1. 等待消息确认后跳转：React Native端收到消息后，通过injectJavaScript向前端发送确认信号，前端收到后再执行跳转。
   • React Native端修改handleMessage：

     const handleMessage = (event) => {
         try {
             const messageData = JSON.parse(event.nativeEvent.data);
             Alert.alert('收到消息', JSON.stringify(messageData));
             // 向前端发送确认信号
             webViewRef.current.injectJavaScript(`window.messageConfirmed = true;`);
         } catch (e) {
             console.error('消息解析失败:', e);
         }
     };
     

   • 前端代码修改：

     window.postMessage(JSON.stringify(data.data), '*');
     // 轮询等待确认信号
     const confirmInterval = setInterval(() => {
         if (window.messageConfirmed) {
             clearInterval(confirmInterval);
             window.location.href = "{{route('dashboard')}}";
         }
     }, 50);
     

2. 延长延迟时间：如果无法实现确认机制，可适当延长setTimeout的时间（比如2000ms），但这种方式依赖设备性能，稳定性较差。

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