React Native與WebView的互動
阿新 • • 發佈:2019-01-12
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’這個地址載入。