时间戳

首页 > 解决方案 > How to communcation between web inside webview back to react native apps

javascript - How to communcation between web inside webview back to react native apps

问题描述

I'm new in React Native.

I need to create communication between RN - Web - RN (RN to Web and then Web back to RN).

Assume i have list of item inside my web that called inside a webview. Each item inside list can be tapped/clicked. When i click one of item inside item list inside my web, i will redirect it to React Native apps page and show detail of realted item.

What i have done until now : I can inject Javascript from React Native to Webview like this :

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

That code can open communication between React Native to Webpage inside webview, but i still fail to communication from Web inside webview to React Native. Can anyone explain, how to do it (and is it possible?)?

标签： javascriptreact-nativewebview

解决方案

您需要使用 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 字符串作为消息发送。

推荐阅读