RN Webview與Web的通訊與調試

原文連接：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 中輸出的信息。

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

注意 ⚠️

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