RN Webview與Web的通訊與除錯

Mello_Z發表於2017-12-20
WebView除錯

原文連結：mrzhang123.github.io/2017/12/20/…

React Native Version:0.51

RN 在 0.37 版本中加入了WebView功能，所以想要在使用WebView,版本必須>=0.37，傳送的 message 只能是字串，所以需要將其他格式的資料轉換成字串，在接收到後再轉換回去，其實直接用JSON.stringify和JSON.parse就可以

載入 html

source屬性用於指定載入的 html，可以載入線上的頁面，也可以載入本地的頁面，程式碼如下：

// 載入線上頁面
<Webview
	source={{uri: 'http://www.mi.com'}}
/>
// 載入本地html檔案
<WebView
	source={require('../src/html/index.html')}
/>
// 或者
<WebView
	source={{uri: 'file:///android_asset/baiduMap/index.html'}}
	onMessage={e => this.handleMessage(e)}
	automaticallyAdjustContentInsets={false}
	startInLoadingState
/>
複製程式碼

注意 ⚠️

載入本地html的方式雖然可以使用require也可以使用uri: 'file:///android_asset/baiduMap/index.html'的形式，但是在實際開發中發現，使用require在打成包之後無法載入到。所以將html放在assets資料夾下，使用file路徑載入：

  1. 將html檔案放在android/app/src/main/assets
  2. 載入html，即source={{uri: 'file:///android_asset/baiduMap/index.html'}}

WebView 與 html 的通訊

webview 傳送資訊到 html

WebView 給 html 傳送資訊需要使用postMessage，而 html 接收 RN 發過來的資訊需要監聽message事件，程式碼如下：

// RN
class WebViewExample extends Component {
  onLoadEnd = () => {
    this.refs.webview.postMessage = 'this is RN msg'
  }
  render() {
    return (
      <WebView
        ref="webview"
        source={require('../html/index.html')}
        onLoadEnd={this.onLoadEnd}
      />
    )
  }
}
export default WebViewExample
// web
window.document.addEventListener('message', function(e) {
  const message = e.data
})
複製程式碼

這裡需要注意一點

postMessage需要在 webview 載入完成之後再去 post，如果放在commponentWillMount裡由於頁面沒有載入完成就 post 資訊，會導致 html 端無法監聽到 message 事件。

html 傳送資訊到 webview

// RN
class WebViewExample extends Component {
  handleMessage = e => {
    const message = e.nativeEvent.data
  }
  render() {
    return (
      <WebView
        ref="webview"
        source={require('../html/index.html')}
        onMessage={e => this.handleMessage(e)}
      />
    )
  }
}
export default WebViewExample

// web
window.postMessage('this is html msg')
複製程式碼

debug

RN 中 debug webview 和安卓開發中看起來是差不多的，連線好裝置後，在 chrome 中輸入

chrome://inspect
複製程式碼

就可以看到安卓裝置上正在執行的 webview 了，點選inspect就會開啟一個除錯頁面，就可以進行 debug 了，RN 似乎預設開啟了 debug 除錯，直接就可以看到 webview 中輸出的資訊。

RN Webview與Web的通訊與除錯

但是我發現我開啟的除錯介面是一個錯亂的介面，不知道為什麼，無奈。

RN Webview與Web的通訊與除錯

注意 ⚠️

這裡需要注意一點的，由於安卓版本的差異，所以內部的 webview 對 js 的支援程度也不同，為了保證相容性，如果使用了 ES6，請轉成 ES5，否則會報錯。

相關文章