h5网页向react-native发消息
- 网页事件中发送消息
window.postMessage('网页向rn发送的消息');
-
react-native中接收消息webview实现onMessage={this.handleMessage}方法,该方法中的e.nativeEvent.data就是网页传过来的消息handleMessage(e) {console.log(e.nativeEvent.data)}
- 注意这里的传至只能是
string
react-native网页向h5发消息
- 首先
webview绑定ref={webview => this.webview = webview}
- 自定义一个点击事件，点击时执行
this.webview.postMessage('rn向网页发送的消息');
- 网页加在时进行监听
e.data就为rn发送过来的消息
window.onload = function() {
document.addEventListener('message', function(e) {
console.log(e.data)
});
遇到的一个小问题Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined.
const patchPostMessageFunction = function() {
var originalPostMessage = window.postMessage;
var patchedPostMessage = function(message, targetOrigin, transfer) {
originalPostMessage(message, targetOrigin, transfer);
};
patchedPostMessage.toString = function() {
return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
};
window.postMessage = patchedPostMessage;
};
const patchPostMessageJsCode = '(' + String(patchPostMessageFunction) + ')();';
- 在
webview加载时注入<WebView injectedJavaScript={patchPostMessageJsCode}/>就可以解决这个问题
