1. 程式人生 > >React Native與WebView的互動

React Native與WebView的互動

1、WebView中注入JavaScript

在webview中通過injectJavaScript注入javascript的方法時,使用方法如下

injectJavaScript={this.init()}
init()方法定義如下
init = () => {
    // todo something
}

通過injectedJavaScript注入javascript字串時,只能注入靜態的文字程式碼。不能動態填入引數。
let jsCode = `init(1, 2)` // 方式一
let jsCode = `init(${a}, ${b})` // 方式二
injectedJavaScript={jsCode}

2、webview與react native通訊

2.1、webview向react native中傳送訊息

html部分程式碼如下:

<script>
    function test() {
        window.postMessage('只能傳遞一個字串型別的引數');
    }
</script>

rn部分程式碼如下

<WebView onMessage={this.onMessage.bind(this)}/>
onMessage = (data) => {
    此處的data即為html中的傳遞過來的引數
}
2.2、react native中向webview中傳送訊息

rn部分程式碼如下

<WebView ref='webView'>
使用this.refs.webView.postMessage('只能傳遞一個字串型別的引數');

在html的javascript中使用如下程式碼接收事件

window.onload = function() {
    document.addEventListener('message', function(msg) {

    });
}

注意:rn和html通過此種方式的互相通訊都只能傳遞一個字串型別的引數,如果有多次的通訊則必須通過新增一定的識別符號來區分。
如果是ios需要加入額外的操作才可以通過postMessage通訊。

3、react native訪問本地html檔案

android release版本通過“把somefile.html檔案放在android/app/src/main/assets檔案裡,使用uri:’file:///android_asset/somefile.html’這個地址載入。