如何在 webview 内的 web 之间进行通信以响应本机应用程序

Question

我是 React Native 的新手。

我需要在 RN - Web - RN 之间创建通信（RN 到 Web，然后 Web 回到 RN）。

假设我的 web 中有在 webview 中调用的项目列表。列表中的每个项目都可以点击/单击。当我单击 Web 中项目列表中的一项时，我会将其重定向到 React Native 应用程序页面并显示相关项目的详细信息。

到目前为止我做了什么： 我可以像这样将 Javascript 从 React Native 注入 Webview：

<WebView
  source={{uri: "myweb.com/webview.php"}}
  injectedJavaScript={jsCode}
  javaScriptEnabledAndroid={true}
  style={{height: 100}} />

该代码可以打开React Native 到 webview 内的Webpage 之间的通信，但我仍然无法从Webview 到 React Native 内的Web 通信。谁能解释一下，怎么做（有可能吗？）？

Answer 1

您需要使用 window.postMessage 从 Web 与 RN 进行通信。

在你注入的Javascript中做这样的事情：

const injectedJs = `
  window.postMessage("Your message");
`;

（在您的情况下，您需要找到列表 DOM 元素并在每次点击时使用 postMessage）

然后在您的 WebView 组件上读取此消息，如下所示：

<WebView
    source={{uri: "myweb.com/webview.php"}}
    injectedJavaScript={injectedJs}
    startInLoadingState
    javaScriptEnabledAndroid={true}
    javaScriptEnabled={true}
    onMessage={event => {
      alert('MESSAGE >>>>' + event.nativeEvent.data);
    }}
/>

您甚至可以将 json 字符串作为消息发送。