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’这个地址加载。