公司一個(gè)項(xiàng)目使用react-native搭了app的架子，使用WebView加載h5實(shí)現(xiàn)UI界面眷细，同時(shí)h5和app需要做很多交互拦盹，今天就來(lái)說(shuō)一下兩者的交互問(wèn)題。
一溪椎、react-native WebView和h5相互發(fā)送消息
（一）h5向react-native WebView發(fā)消息
- h5發(fā)送消息普舆，只能傳遞string類型
data={
"Name":"getUserId",
"userId":"1234567890"
};
window.postMessage(JSON.stringify(data), '*');
- react-native中接收消息
網(wǎng)頁(yè)端的 window.postMessage 只發(fā)送一個(gè)參數(shù) data，此參數(shù)封裝在 react-native端的 event 對(duì)象中校读，即 event.nativeEvent.data沼侣。data 只能是一個(gè)字符串。
_handlerMessage(evt) {
let action = JSON.parse(evt.nativeEvent.data);
switch (action.Name) {
case "getUserId" : {
console.log("獲取userId",evt.nativeEvent.data);
break;
}
}
}
...
<WebView
style={webViewStyle}
source={{uri: this.state.url}}
scalesPageToFit={Platform.OS === 'ios'}
javaScriptEnabled={true}
injectedJavaScript={onMessage}
ref='webView'
onMessage={(event) => this._handlerMessage(event)}
/>
...
（二）react-native WebView向h5發(fā)消息
- react-native發(fā)送消息
首先WebView要綁定ref='webView'歉秫，然后執(zhí)行this.refs['webView'].postMessage('發(fā)送消息');
let message = `{"Name":"selectPhoto","url":"${result.data}"}`;
console.log("選擇圖片", message);
this.refs['webView'].postMessage(message);
- h5中接收消息
h5在加載的時(shí)候注冊(cè)監(jiān)聽蛾洛，監(jiān)聽message
注意：這個(gè)監(jiān)聽的名字只能叫message。
function selectPhoto(){
window.document.addEventListener('message', function( message ){
let action = JSON.parse(message.data);
if(action.Name == "selectPhoto"){
console.log("圖片地址", action.url);
}
});
}
二雁芙、react-native WebView向h5注入js
react-native WebView的injectedJavaScript屬性可以設(shè)置 js 字符串轧膘，在網(wǎng)頁(yè)加載之前注入的一段 js 代碼。
let message = `document.addEventListener('message', function( message ){
let action = JSON.parse(message.data);
if(action.Name == "goBackHome"){
location.href = action.url;
}
})`
...
<WebView
style={webViewStyle}
source={{uri: this.state.url}}
scalesPageToFit={Platform.OS === 'ios'}
javaScriptEnabled={true} // 控制是否啟用 JavaScript
injectedJavaScript={message}
ref='webView'
onMessage={(event) => this._handlerMessage(event)}
/>
...
reload(){
let message = `{"Name":"goBackHome","url":"${this.state.url}"}`;
console.log("返回首頁(yè)地址", typeof(message));
this.refs['webView'].postMessage(message);
}
