React Native Version:0.51

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

加載 html

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

// 加載線上頁面

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

/>

// 加載本地html文件

source={require('../src/html/index.html')}

/>

注意 ??

在 RN 中可以加載 WebView，但是無法調(diào)試，也不能使用 alert 來驗(yàn)證代碼 js 代碼是否運(yùn)行成功，只能通過往 html 寫入東西(innerHTML)來驗(yàn)證 js 是否運(yùn)行成功

WebView 與 html 的通信

webview 發(fā)送信息到 html

WebView 給 html 發(fā)送信息需要使用postMessage，而 html 接收 RN 發(fā)過來的信息需要監(jiān)聽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

})

這里需要注意一點(diǎn)

postMessage需要在 webview 加載完成之后再去 post，如果放在commponentWillMount里由于頁面沒有加載完成就 post 信息，會(huì)導(dǎo)致 html 端無法監(jiān)聽到 message 事件。

html 發(fā)送信息到 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 和安卓開發(fā)中看起來是差不多的，連接好設(shè)備后，在 chrome 中輸入

chrome://inspect

就可以看到安卓設(shè)備上正在運(yùn)行的 webview 了，點(diǎn)擊inspect就會(huì)開啟一個(gè)調(diào)試頁面，就可以進(jìn)行 debug 了，RN 似乎默認(rèn)開啟了 debug 調(diào)試，直接就可以看到 webview 中輸出的信息。

webview_debug.png

但是我發(fā)現(xiàn)我打開的調(diào)試界面是一個(gè)錯(cuò)亂的界面，不知道為什么，無奈。

debug界面.jpeg

注意 ??

這里需要注意一點(diǎn)的，由于安卓版本的差異，所以內(nèi)部的 webview 對(duì) js 的支持程度也不同，為了保證兼容性，如果使用了 ES6，請(qǐng)轉(zhuǎn)成 ES5，否則會(huì)報(bào)錯(cuò)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。