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

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 内的网页之间的通信，但我仍然无法从 web 内的 webview 通信到React Native。谁能解释一下，怎么做（有可能吗？）？

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 字符串作为消息发送。