React Native中useEffect调用postMessage早于WebView监听的问题如何解决？

最可靠的解决方案：让WebView主动告知就绪状态 #

原来依赖onLoadEnd的方法失效，是因为RN的onLoadEnd仅表示WebView页面资源加载完成，但WebView内部的JavaScript可能还没完成message事件监听的注册。最稳妥的方式是让WebView主动向RN发送"已准备好接收消息"的通知，RN收到后再发送目标消息。

1. RN端代码调整

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

export default function YourComponent() {
  const [isWebViewReady, setIsWebViewReady] = useState(false);
  const webViewRef = useRef(null);

  useEffect(() => {
    // 仅当WebView就绪且存在实例时发送消息
    if (isWebViewReady && webViewRef.current) {
      webViewRef.current.postMessage('需要发送的消息内容');
    }
  }, [isWebViewReady]);

  const handleWebViewMessage = (event) => {
    const receivedMsg = event.nativeEvent.data;
    // 判断是否是WebView发来的就绪通知
    if (receivedMsg === 'webview-ready') {
      setIsWebViewReady(true);
    }
  };

  return (
    <WebView
      ref={webViewRef}
      source={{ uri: '你的网页地址' }}
      onMessage={handleWebViewMessage}
      javaScriptEnabled={true}
    />
  );
}

2. WebView端网页代码调整

在网页的JavaScript中，等DOM加载完成并注册好message监听后，主动向RN发送就绪信号：

document.addEventListener('DOMContentLoaded', () => {
  // 先注册message监听逻辑
  window.addEventListener('message', (event) => {
    console.log('收到RN消息:', event.data);
    // 这里处理收到的消息
  });

  // 通知RN：WebView已准备好接收消息
  window.ReactNativeWebView.postMessage('webview-ready');
});

临时替代方案：延迟发送消息（不推荐） #

如果无法修改网页代码，可以尝试用setTimeout延迟发送消息，但这种方式依赖设备性能，稳定性较差：

useEffect(() => {
  if (!isWebViewLoaded) return;
  // 延迟500ms发送，可根据实际情况调整时长
  setTimeout(() => {
    webViewRef.current.postMessage('需要发送的消息内容');
  }, 500);
}, [isWebViewLoaded]);

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