ReactNative与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={Message.bind(this)}/>
onMessage = (data) => {
此处的data即为html中的传递过来的参数
}
2.2、react native中向webview中发送消息
rn部分代码如下
<WebView ref='webView'>
使⽤fs.webView.postMessage('只能传递⼀个字符串类型的参数');
在html的javascript中使⽤如下代码接收事件
document.addEventListener('message', function(msg) {
});
}
注意：rn和html通过此种⽅式的互相通信都只能传递⼀个字符串类型的参数，如果有多次的通信则必须通过添加⼀定的标识符来区分。 如果是ios需要加⼊额外的操作才可以通过postMessage通信。
3、react native访问本地html⽂件reactnative开发
android release版本通过“把somefile.html⽂件放在android/app/src/main/assets⽂件⾥，使⽤
uri:’file:///android_asset/somefile.html’这个地址加载。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。