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

时间:2018-11-14 09:52:19

标签: javascript react-native webview

我是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进行通信。谁能解释,怎么做(有可能吗?)?

1 个答案:

答案 0 :(得分: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字符串作为消息。