RN Webview與Web的通訊與調試

原文連接：https://mrzhang123.github.io/...

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')}
/>

注意 ⚠️

在 RN 中能夠加載 WebView，可是沒法調試，也不能使用 alert 來驗證代碼 js 代碼是否運行成功，只能經過往 html 寫入東西（innerHTML）來驗證 js 是否運行成功

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 中輸出的信息。

可是我發現我打開的調試界面是一個錯亂的界面，不知道爲何，無奈--！

注意 ⚠️

這裏須要注意一點的，因爲安卓版本的差別，因此內部的 webview 對 js 的支持程度也不一樣，爲了保證兼容性，若是使用了 ES6，請轉成 ES5，不然會報錯。