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

方式1：RN Webview 向H5注入JS

此方式可作為Webview向H5端傳遞數(shù)據(jù)。

RN Webview 有以下屬性，可以注入一段js，然后在相應(yīng)的時(shí)間調(diào)用。

injectedJavaScript 設(shè)置 js 字符串，在網(wǎng)頁加載之前注入的一段 JS 代碼。

類型

必填

string

否

思路：通過injectedJavaScript 注入JS ，在H5頁面加載之后立即執(zhí)行。相當(dāng)于webview端主動(dòng)調(diào)用H5的方法。

這里有個(gè)注意點(diǎn)，injectedJavaScript注入的必須是js。注入的內(nèi)容可以是方法實(shí)現(xiàn)，也可以是方法名字

需要說明

1.其實(shí)注入函數(shù)名的時(shí)候，實(shí)際上注入的仍然是函數(shù)實(shí)現(xiàn)

2.當(dāng)注入js方法名需要傳遞參數(shù)的時(shí)候，可提前將函數(shù)名作為字符串，函數(shù)參數(shù)作為變量，生成一個(gè)字符串，然后將此字符串注入。

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 相互發(fā)送監(jiān)聽消息

該方式可雙向發(fā)送數(shù)據(jù)信息。

(1)RN端向H5發(fā)送消息

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

onLoadEnd={() => {

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

}}

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

H5在加載的時(shí)候注冊監(jiān)聽。

H5 監(jiān)聽message 注意這個(gè)監(jiān)聽的名字只能叫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發(fā)送消息

RN Webview onMessage 屬性

在 webview 內(nèi)部的網(wǎng)頁中調(diào)用 window.postMessage 方法時(shí)可以觸發(fā)此屬性對應(yīng)的函數(shù)，從而實(shí)現(xiàn)網(wǎng)頁和 RN 之間的數(shù)據(jù)交換。 設(shè)置此屬性的同時(shí)會(huì)在 webview 中注入一個(gè) postMessage 的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實(shí)現(xiàn)。

網(wǎng)頁端的 window.postMessage 只發(fā)送一個(gè)參數(shù) data，此參數(shù)封裝在 RN 端的 event 對象中，即 event.nativeEvent.data。data 只能是一個(gè)字符串。

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

const injectedJavascript = `(function() {

window.postMessage = function(data) {

window.ReactNativeWebView.postMessage(data);

};

})()`;

類型

必填

function

否

實(shí)現(xiàn)過程：

H5發(fā)送消息，此時(shí)只能傳遞string類型

window.postMessage('網(wǎng)頁向rn發(fā)送的消息');

react-native中接收消息

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。