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)頁(yè)加載之前注入的一段 JS 代碼。
| 類型 | 必填 |
|---|---|
| string | 否 |
思路：通過(guò)injectedJavaScript 注入JS ，在H5頁(yè)面加載之后立即執(zhí)行。相當(dāng)于webview端主動(dòng)調(diào)用H5的方法。
這里有個(gè)注意點(diǎn)，injectedJavaScript注入的必須是js。注入的內(nèi)容可以是方法實(shí)現(xiàn)，也可以是方法名字
需要說(shuō)明
1.其實(shí)注入函數(shù)名的時(shí)候，實(shí)際上注入的仍然是函數(shù)實(shí)現(xiàn)
2.當(dāng)注入js方法名需要傳遞參數(shù)的時(shí)候，可提前將函數(shù)名作為字符串，函數(shù)參數(shù)作為變量，生成一個(gè)字符串，然后將此字符串注入。
H5端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onClick="hhh(abc)" style="margin-top: 100px;" id="hhhh">hhhh</button>
<button id="rrrrrr">rrrrrr</button>
<script>
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";
}
</script>
</body>
</html>
RN端
render() {
let text = this.props.navigation.state.params.authInfo;
let text1 = `yyy('${text}')`;
console.log(text1);
return (
<View
style={{flex: 1, backgroundColor: 'white', marginBottom: SAFE_AREA_BOTTOM_HEIGHT}}>
<WebView style={{flex: 1}}
ref='webView'
// source={{uri: this.props.navigation.state.params.url}}
injectedJavaScript={`${text1}`}
source={{
html: '<body>\n' +
'<button onClick="hhh()" style="margin-top: 100px;" id="hhhh">hhhh</button>\n' +
'<button id="rrrrrr">rrrrrr</button>\n' +
'<script>\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' +
'</script>\n' +
'\n' +
'</body>'
}}
// onLoadEnd={() => {
// this.refs.webView.postMessage(this.props.navigation.state.params.authInfo);
// }}
>
</WebView>
</View>
);
}
這種方式和OC中WKWebView注入JS的原理基本一致。
方式2：Webview 和 H5 相互發(fā)送監(jiān)聽(tīng)消息
該方式可雙向發(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í)候注冊(cè)監(jiān)聽(tīng)。
H5 監(jiān)聽(tīng)message 注意這個(gè)監(jiān)聽(tīng)的名字只能叫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)頁(yè)中調(diào)用 window.postMessage 方法時(shí)可以觸發(fā)此屬性對(duì)應(yīng)的函數(shù)，從而實(shí)現(xiàn)網(wǎng)頁(yè)和 RN 之間的數(shù)據(jù)交換。 設(shè)置此屬性的同時(shí)會(huì)在 webview 中注入一個(gè) postMessage 的全局函數(shù)并覆蓋可能已經(jīng)存在的同名實(shí)現(xiàn)。
網(wǎng)頁(yè)端的 window.postMessage 只發(fā)送一個(gè)參數(shù) data，此參數(shù)封裝在 RN 端的 event 對(duì)象中，即 event.nativeEvent.data。data 只能是一個(gè)字符串。
webview 組件 在被官方放棄之后，react-native-webview 作為替換。react-native-webview 5.0 之后需要注入js
https://github.com/react-native-community/react-native-webview/releases/tag/v5.0.0
需要注入以下這段js 用以替換window.postMessage. H5 使用方法不變。
const injectedJavascript = `(function() {
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(data);
};
})()`;
| 類型 | 必填 |
|---|---|
| function | 否 |
實(shí)現(xiàn)過(guò)程：
H5發(fā)送消息，此時(shí)只能傳遞string類型
window.postMessage('網(wǎng)頁(yè)向rn發(fā)送的消息');
react-native中接收消息
onMessage={(event) => {console.log(event.nativeEvent.data);}}
