ホームページ > 記事 > ウェブフロントエンド > React NativeとWebview間の通信について

React NativeとWebview間の通信について

小云云オリジナル: 2018-02-01 13:17:482214ブラウズ

WebView は ReactNative のコンポーネントであり、ネイティブ WebView を作成することができ、Web ページにアクセスするために使用できます。この記事では主に React Native と WebView 間の通信のサンプルコードを紹介します。今すぐ皆さんと共有して参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

RN と WebView の間で通信したり、データを転送したり、メッセージ通知を送信したりする必要がある場合があります。このとき、次の知識を使用する必要があります。

1: WebView は RN にデータを送信します。 まず、Web ビューを構築します。

<WebView
  ref={&#39;webview&#39;}
  source={require(&#39;./index.html&#39;)}
  style={{width: 375, height: 220}}
  onMessage={(e) => {
    this.handleMessage(e)
  }}
  
/>

onMessage メソッド、

onMessage 関数があることがわかります

このプロパティは、Web ページ内の window.postMessage メソッドが呼び出されたときにトリガーできます。 webview は、Web ページと RN 間のデータ交換を実現する機能です。このプロパティを設定すると、postMessage グローバル関数が Web ビューに挿入され、既に存在する可能性のある同じ名前の実装をオーバーライドします。

Web ページの window.postMessage は、RN 側のイベントオブジェクト、つまりevent.nativeEvent.data にカプセル化されたパラメーターデータを 1 つだけ送信します。データは文字列のみにすることができます。

このメソッドは、Webview (つまり、HTML) からデータを受信するために使用されていることがわかります。

内部実装は、受信したデータを処理することです:

handleMessage(e) {
  this.setState({webViewData: e.nativeEvent.data});
}

e.nativeEvent .data WebView 内から送信されるデータ

これだけでは Rn 側の処理だけでは不十分です:

rreee

window.postMessage でデータを送信するメソッドも記述する必要があります。 RN にデータを送信します。

2: RN が Webview にデータを送信します:

まず、データを送信するメソッドを定義します:

var data = 0;

function sendData(data) {
  if (window.originalPostMessage) {
    window.postMessage(data);
  } else {
    throw Error(&#39;postMessage接口还未注入&#39;);
  }
}
document.getElementById(&#39;button&#39;).onclick = function () {
  data += 100;
  sendData(data);
}

このステップは非常に簡単です。
送信したいデータを書き込みますパラメータとして直接このメソッドで実行するだけです

そして、HTMLでデータを受信する対応するメソッドが必要です:

sendMessage() {
  this.refs.webview.postMessage(++this.data);
}

これでRnとWebview間の通信を実現できます

。ソースコード:

window.onload = function () {
  document.addEventListener(&#39;message&#39;, function (e) {
    document.getElementById(&#39;data&#39;).textContent = e.data;
  });

}

web.js:

<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p style="text-align: center">
  <button id="button">发送数据到react native</button>
  <p style="text-align: center">收到react native发送的数据: <span id="data"></span></p>
</p>
<script>
  var data = 0;

  function sendData(data) {
    if (window.originalPostMessage) {
      window.postMessage(data);
    } else {
      throw Error(&#39;postMessage接口还未注入&#39;);
    }
  }

  window.onload = function () {
    document.addEventListener(&#39;message&#39;, function (e) {
      document.getElementById(&#39;data&#39;).textContent = e.data;
    });
    document.getElementById(&#39;button&#39;).onclick = function () {
      data += 100;
      sendData(data);
    }
  }
</script>
</body>
</html>

React NativeとWebview間の通信について

関連記事