React Native WebView无法接收postMessage数据：获取Yandex地图坐标求助

关键问题分析 #

1. Web端postMessage目标错误：在React Native WebView环境中，window.parent和直接调用window.postMessage无法正确将消息传递给原生端，需要使用WebView注入的专属通信对象。
2. 状态更新异步导致数据不准确：setData是异步操作，依赖100ms定时器等待状态更新不可靠，可能导致发送的data仍是旧值。
3. WebView配置缺失：未显式开启JavaScript支持，也未设置消息来源白名单，可能限制了通信权限。

修复方案 #

1. 修正Web端postMessage调用 #

替换Web端sendData中的调用方式，使用React Native WebView专属的通信API：

const sendData = () => {
    console.log('send');
    const info = { message: data };
    console.log('sendData', info);
    // 仅保留这一行即可，这是WebView与原生通信的标准方式
    window.ReactNativeWebView.postMessage(JSON.stringify(info));
};

2. 替换定时器为状态监听 #

使用useEffect监听data变化，确保坐标更新完成后再发送数据：

// 新增监听逻辑，当data更新时自动触发发送
useEffect(() => {
    // 确保坐标存在时才发送
    if (data?.coordinates) {
        sendData();
    }
}, [data]);

// 修改handleData，移除不可靠的定时器
const handleData = (value, coordinates, apartmentNumber, officeNumber, phoneNumber) => {
    setData({
        address: value, 
        coordinates, 
        apartmentNumber, 
        office: officeNumber, 
        other: phoneNumber
    });
};

3. 完善React Native WebView配置 #

显式开启JavaScript并设置来源白名单，确保通信权限：

<WebView
  style={styles.container}
  ref={webViewRef}
  source={{ uri: 'http://localhost:3000/map' }}
  onMessage={handleMap}
  // 显式开启JS支持
  javaScriptEnabled={true}
  // 本地开发允许文件访问（按需开启）
  allowFileAccess={true}
  // 设置允许的消息来源，生产环境替换为实际域名
  originWhitelist={['http://localhost:3000']}
/>

4. 增强调试容错性 #

在移动端handleMap中增加异常捕获，避免解析失败导致无输出：

const handleMap = (event) => {
    try {
        const rawData = event.nativeEvent.data;
        console.log('原始接收数据:', rawData);
        const data = JSON.parse(rawData);
        console.log('解析后的数据:', data);
    } catch (error) {
        console.error('数据解析失败:', error);
    }
};

完整修改后代码 #

移动端（React Native） #

const handleMap = (event) => {
    try {
        const rawData = event.nativeEvent.data;
        console.log('原始接收数据:', rawData);
        const data = JSON.parse(rawData);
        console.log('解析后的数据:', data);
    } catch (error) {
        console.error('数据解析失败:', error);
    }
};

<WebView
  style={styles.container}
  ref={webViewRef}
  source={{ uri: 'http://localhost:3000/map' }}
  onMessage={handleMap}
  javaScriptEnabled={true}
  allowFileAccess={true}
  originWhitelist={['http://localhost:3000']}
/>

Web端 #

useEffect(() => {
    const handleMessage = (event) => {
        const data = event.data;
        console.log('Web端接收消息:', data);
    };

    window.addEventListener('message', handleMessage);

    return () => {
        window.removeEventListener('message', handleMessage);
    };
}, []);

useEffect(() => {
    if (data?.coordinates) {
        sendData();
    }
}, [data]);

const handleData = (value, coordinates, apartmentNumber, officeNumber, phoneNumber) => {
    setData({
        address: value, 
        coordinates, 
        apartmentNumber, 
        office: officeNumber, 
        other: phoneNumber
    });
};

const sendData = () => {
    console.log('开始发送数据');
    const info = { message: data };
    console.log('待发送数据:', info);
    window.ReactNativeWebView.postMessage(JSON.stringify(info));
};

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