如何在 React Native webview 中使用 PostMessage？

Question

我正在尝试使用在 React Native 应用程序内的 web 视图中打开的页面的 postmessage。我尝试了很多次，但仍然无法发送。

我可以正常收听网页消息。我只是无法寄回任何东西。

我目前正在使用react-native-webview 11.6.5

export default function WebPage() {
  const webviewRef = useRef();

  const onMessage = (event) => {
    //receive message from the web page. working here until here
    const data = JSON.parse(event.nativeEvent.data);

    //reply the message
    webviewRef.current.postMessage(
      JSON.stringify({reply: 'reply'}),
      '*'
    )
  }

  return <View>
    <WebView
      ref={webviewRef}
      originWhitelist={['*']}
      source={{ uri: 'https://robertnyman.com/html5/postMessage/postMessage.html' }}
      domStorageEnabled
      javaScriptEnabled
      onMessage={onMessage}
    />
  </View>


}

有什么想法我做错了什么吗？

更新：

感谢@Ahmed Gaber 的帮助，我找到了这个问题https://github.com/react-native-webview/react-native-webview/issues/809并发现它们正在更改postMessage为injectJavaScript.

所以我将代码更新onMessage为以下内容：

const onMessage = (event) => {
  const data = JSON.parse(event.nativeEvent.data);

  //reply the message
  webviewRef.current.injectJavaScript(
    `window.postMessage(
      {
        reply: 'reply'
      }
    );`
  )
}

Answer 1

要将数据从应用程序发送到webview，请使用InjectedJavaScript
要将数据从webview应用程序发送到应用程序，请使用postMessage
要接收webview由 发送的数据postMessage，请使用onMessage

// This Js function will be injected into the web page after the document finishes loading.
// This function will Post a message to WebView.
const INJECTED_JAVASCRIPT = `(function() {
    window.ReactNativeWebView.postMessage(JSON.stringify({key : "value"}));
})();`;



<WebView
  source={{ uri: 'https://reactnative.dev' }}
  injectedJavaScript={INJECTED_JAVASCRIPT}
  onMessage={(event) => {
       const data = JSON.parse(event.nativeEvent.data);
       alert(data.key);
  }}
/>;

Answer 2

反应本机代码

    function getInjectableJSMessage(message) {
        return `
          (function() {
            document.dispatchEvent(new MessageEvent('message', {
              data: ${JSON.stringify(message)}
            }));
          })();
        `;
      }
function sendDataToWebView() {
    webviewRef.current?.injectJavaScript(
      getInjectableJSMessage("Hello")
    );
  }

反应网络应用程序代码

React.useEffect(() => {
    function handleEvent(message) {
      console.log(message.data);
    }
    document.addEventListener("message", handleEvent);

    return () =>
      document.removeEventListener("message", handleEvent);
  }, []);