Question

我是React Native的新手。

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

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

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

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

该代码可以打开React Native 到 Webview内部网页之间的通信，但是我仍然无法从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字符串作为消息。

如何在Webview内部的Web之间通讯以响应本机应用

1 个答案: