React-Native WebView 和H5交互有兩種方式：

方式1：RN Webview 向H5注入JS

此方式可作為Webview向H5端傳遞數據。

RN Webview 有以下屬性，可以注入一段js，然后在相應的時間調用。

injectedJavaScript 設置 js 字符串，在網頁加載之前注入的一段 JS 代碼。

類型

必填

string

否

思路：通過injectedJavaScript 注入JS ，在H5頁面加載之后立即執行。相當于webview端主動調用H5的方法。

這里有個注意點，injectedJavaScript注入的必須是js。注入的內容可以是方法實現，也可以是方法名字

需要說明

1.其實注入函數名的時候，實際上注入的仍然是函數實現

2.當注入js方法名需要傳遞參數的時候，可提前將函數名作為字符串，函數參數作為變量，生成一個字符串，然后將此字符串注入。

H5端

Title

hhhh

rrrrrr

alert(1111);

function hhh(text) {

var hideButon= document.getElementById('rrrrrr')

// .style.display = 'none';

// hideButon.style.display='none';

hideButon.innerHTML=text;

}

function yyy(text) {

// var hideButon=

document.getElementById('hhhh').innerHTML="1111111111";

// .style.display = 'none';

alert(text);

// hideButon.innerHTML="text";

}

RN端

render() {

let text = this.props.navigation.state.params.authInfo;

let text1 = `yyy('${text}')`;

console.log(text1);

return (

style={{flex: 1, backgroundColor: 'white', marginBottom: SAFE_AREA_BOTTOM_HEIGHT}}>

ref='webView'

// source={{uri: this.props.navigation.state.params.url}}

injectedJavaScript={`${text1}`}

source={{

html: '

\n' +

'hhhh\n' +

'rrrrrr\n' +

'

'\n' +

'\n' +

' function hhh(text) {\n' +

' var hideButon= document.getElementById(\'rrrrrr\')\n' +

'// .style.display = \'none\';\n' +

'\n' +

'// hideButon.style.display=\'none\';\n' +

'\n' +

' hideButon.innerHTML="text";\n' +

' }\n' +

'\n' +

'\n' +

' function yyy(text) {\n' +

'// var hideButon=\n' +

' document.getElementById(\'hhhh\').innerHTML=text;\n' +

'// .style.display = \'none\';\n' +

'\n' +

' alert(text);\n' +

'\n' +

' hideButon.innerHTML="text";\n' +

' }\n' +

'\n' +

'\n' +

'\n' +

'\n' +

'\n' +

''

}}

// onLoadEnd={() => {

// this.refs.webView.postMessage(this.props.navigation.state.params.authInfo);

// }}

>

);

}

這種方式和OC中WKWebView注入JS的原理基本一致。

方式2：Webview 和 H5 相互發送監聽消息

該方式可雙向發送數據信息。

(1)RN端向H5發送消息

首先Webview綁定ref={webview => this.webview = webview}

onLoadEnd={() => {

this.refs.webView.postMessage('RN向H5發送的消息');

}}

也可可在其他任意地方獲取webview，執行this.webview.postMessage('RN向H5發送的消息');

H5在加載的時候注冊監聽。

H5 監聽message 注意這個監聽的名字只能叫message。

in Android

window.onload = function() {

document.addEventListener("message", function(event) {

alert("This is a Entry Point Working in android");

init(event.data)

});

}

in iOS

window.onload = function() {

window.addEventListener("message", function(event) {

alert("This is a Entry Point Working in iOS");

init(event.data)

});

}

(2)H5向RN發送消息

RN Webview onMessage 屬性

在 webview 內部的網頁中調用 window.postMessage 方法時可以觸發此屬性對應的函數，從而實現網頁和 RN 之間的數據交換。 設置此屬性的同時會在 webview 中注入一個 postMessage 的全局函數并覆蓋可能已經存在的同名實現。

網頁端的 window.postMessage 只發送一個參數 data，此參數封裝在 RN 端的 event 對象中，即 event.nativeEvent.data。data 只能是一個字符串。

webview 組件 在被官方放棄之后，react-native-webview 作為替換。react-native-webview 5.0 之后需要注入js

const injectedJavascript = `(function() {

window.postMessage = function(data) {

window.ReactNativeWebView.postMessage(data);

};

})()`;

類型

必填

function

否

實現過程：

H5發送消息，此時只能傳遞string類型

window.postMessage('網頁向rn發送的消息');

react-native中接收消息

onMessage={(event) => {console.log(event.nativeEvent.data);}}

總結

以上是生活随笔為你收集整理的react 调用 html5,React-Native Webview 和H5交互的两种方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。