React Native向WebView中React应用传数据失败问题排查

问题分析 #

当前代码的核心问题集中在WebView配置不全和消息发送时机过早，导致React应用无法接收RN发送的消息。

修复步骤 #

1. 完善WebView关键配置 #

React Native的WebView需要启用必要的JS环境配置，否则postMessage通信会失效。修改RN端WebView代码：

const webViewRef = React.useRef<WebView>(null);

const handleWebMessage = (event) => {
  // 接收Web端的就绪信号后再发送数据
  if (event.nativeEvent.data === "web_ready") {
    webViewRef?.current?.postMessage("Hello from RN");
  }
};

return (
  <SafeAreaView style={styles.flexContainer}>
    <WebView
      ref={webViewRef}
      source={{ uri: 'http://localhost:3000/' }}
      startInLoadingState
      javaScriptEnabled={true}
      domStorageEnabled={true} // 启用DOM存储，确保Web JS环境正常
      allowsInlineMediaPlayback={true}
      allowUniversalAccessFromFileURLs={true} // Android端推荐开启，避免跨域限制
      style={styles.flexContainer}
      onMessage={handleWebMessage} // 新增：接收Web端消息
    />
  </SafeAreaView>
);

2. 调整消息发送逻辑（双向确认） #

onLoadEnd触发时，Web页面的React组件可能还未完成挂载，监听事件尚未注册。改为Web端主动发送就绪信号后，RN再发送数据：

修改React应用代码：

import React, { useState, useEffect, useRef } from 'react';
import './HolographicCard.css';

declare global {
  interface Window {
    ReactNativeWebView: {
      postMessage(message: string): void;
    };
  }
}

const HolographicCard = () => {
  const webViewRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const messageListener = (event: MessageEvent) => {
      console.log('Message from RN:', event.data);
      // 这里可以处理陀螺仪数据等业务逻辑
    };

    window.addEventListener('message', messageListener);

    // 组件挂载后，通知RN Web端已准备好接收消息
    window.ReactNativeWebView.postMessage("web_ready");

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

  async function navigateBackToApp() {
    window.ReactNativeWebView.postMessage('navigateBack');
  }

  return (
    <div className="card-container">
      <div className={`holographic-part`} ref={webViewRef}>
        {/* ... other content ... */}
      </div>
      <button className="success-button" onClick={navigateBackToApp}>
        Return
      </button>
    </div>
  );
};

export default HolographicCard;

3. 额外排查点 #

• 更新依赖版本：确保使用最新版react-native-webview，旧版本存在postMessage兼容性问题，执行npm install react-native-webview@latest更新。
• 跨域验证：生产环境中，确保React应用的域名被RN WebView允许，必要时配置CORS。
• 日志调试：在RN端的handleWebMessage中添加日志，确认是否收到Web端的就绪信号，排查通信链路是否通畅。

疑问解答 #

• 是否遗漏步骤？：是的，缺少WebView的关键配置项和双向就绪确认逻辑，导致消息发送时机不匹配。
• 是否需要特定配置？：必须开启javaScriptEnabled，推荐启用domStorageEnabled；Android端需额外开启allowUniversalAccessFromFileURLs避免跨域限制。
• postMessage的已知问题？：旧版本库存在消息丢失问题，发送时机过早会导致Web端未注册监听而收不到消息，跨域场景下需配置CORS。

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