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’這個地址加載。