React Native Version:0.51

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

加載 html

source屬性用于指定加載的 html，可以加載在線的頁面，也可以加載本地的頁面，代碼如下：

// 加載線上頁面

source={{uri: 'http://www.mi.com'}}

/>

// 加載本地html文件

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 (

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 (

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_debug.png

但是我發現我打開的調試界面是一個錯亂的界面，不知道為什么，無奈。

debug界面.jpeg

注意 ??

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

總結

以上是生活随笔為你收集整理的android rn 和webview,RN Webview与Web的通信与调试的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。