React NativeとWebview間の通信例を詳しく解説-jsチュートリアル-php.cn

React NativeとWebview間の通信例を詳しく解説

巴扎黑

リリース： 2017-09-26 09:36:13

オリジナル

3261 人が閲覧しました

この記事では主にReact NativeとWebView間の通信のサンプルコードを紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう。

WebView は、Web ページにアクセスするために使用できるネイティブ WebView を作成できます。

場合によっては、RN と WebView の間で通信する必要があります。、またはメッセージ通知を送信するには、次の知識を使用する必要があります

1: WebView は RN 側にデータを送信します:

まず、WebView を構築します。

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

ログイン後にコピー

onMessage メソッド、

onMessage 関数

があることがわかります。Web ビュー内の Web ページで window.postMessage メソッドが呼び出されると、この属性に対応する関数がトリガーされ、それによって、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間の通信例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。