react-native WebView與h5交互

公司一個項目使用react-native搭了app的架子,使用WebView加載h5實現UI界面,同時h5和app需要做很多交互,今天就來說一下兩者的交互問題。

一、react-native WebView和h5相互發送消息

(一)h5向react-native WebView發消息
  1. h5發送消息,只能傳遞string類型
data={
    "Name":"getUserId",
    "userId":"1234567890"
};
window.postMessage(JSON.stringify(data), '*');
  1. react-native中接收消息
    網頁端的 window.postMessage 只發送一個參數 data,此參數封裝在 react-native端的 event 對象中,即 event.nativeEvent.data。data 只能是一個字符串。
_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發消息
  1. react-native發送消息
    首先WebView要綁定ref='webView',然后執行this.refs['webView'].postMessage('發送消息');
let message = `{"Name":"selectPhoto","url":"${result.data}"}`;
console.log("選擇圖片",  message);
this.refs['webView'].postMessage(message);
  1. h5中接收消息
    h5在加載的時候注冊監聽,監聽message

注意:這個監聽的名字只能叫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屬性可以設置 js 字符串,在網頁加載之前注入的一段 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("返回首頁地址", typeof(message));
      this.refs['webView'].postMessage(message);
  }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。