ホームページ > 記事 > ウェブフロントエンド > React NativeとWebview間の通信例を詳しく解説
React NativeとWebview間の通信例を詳しく解説
- 巴扎黑オリジナル
- 2017-09-26 09:36:133210ブラウズ
この記事では主にReact NativeとWebView間の通信のサンプルコードを紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう。
WebView は、Web ページにアクセスするために使用できるネイティブ WebView を作成できます。
場合によっては、RN と WebView の間で通信する必要があります。 、またはメッセージ通知を送信するには、次の知識を使用する必要があります
1: WebView は RN 側にデータを送信します:
まず、WebView を構築します。
<WebView
ref={'webview'}
source={require('./index.html')}
style={{width: 375, height: 220}}
onMessage={(e) => {
this.handleMessage(e)
}}
/>onMessage メソッド、
onMessage 関数
があることがわかります。Web ビュー内の Web ページで window.postMessage メソッドが呼び出されると、この属性に対応する関数がトリガーされ、それによって、Web ビュー間のデータ交換が実現されます。ウェブページとRN。 このプロパティを設定すると、postMessage グローバル関数が Web ビューに挿入され、既に存在する可能性のある同じ名前の実装をオーバーライドします。
内部実装は、受信したデータを処理することです:
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('postMessage接口还未注入');
}
}
document.getElementById('button').onclick = function () {
data += 100;
sendData(data);
}このステップは非常に簡単です。送信したいデータを書き込みますパラメータとして直接このメソッドで実行するだけです
そして、HTMLでデータを受信する対応するメソッドが必要です:
sendMessage() {
this.refs.webview.postMessage(++this.data);
}これでRnとWebview間の通信を実現できます
。ソースコード:
window.onload = function () {
document.addEventListener('message', function (e) {
document.getElementById('data').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('postMessage接口还未注入');
}
}
window.onload = function () {
document.addEventListener('message', function (e) {
document.getElementById('data').textContent = e.data;
});
document.getElementById('button').onclick = function () {
data += 100;
sendData(data);
}
}
</script>
</body>
</html>以上がReact NativeとWebview間の通信例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。