React Native WebView postMessage不起作用

我无法使React Native WebView postMessage正常工作。React本机应用程序成功接收来自web应用程序的post消息sendt。但是web应用程序不接收从React本机应用程序发送的消息

我的简单web应用程序

<html>
<车身>
<按钮>从web发送邮件&lt/按钮>
<部门>发布消息日志&lt/部门>
<textarea style=“高度:50%;宽度:100%;”只读&gt&lt/textarea>
<脚本>
var log=document.querySelector(“textarea”);
document.querySelector(“按钮”).onclick=function(){
console.log(“发送邮件”);
logMessage(“从web发送邮件…”);
window.postMessage(“从web发布消息”,“*”);
}
window.addEventListener(“消息”,函数(事件){
console.log(“收到的邮件”,事件);
日志消息(事件数据);
},假);
功能日志消息(消息){
log.append((新日期())+“”+消息+“\n”);
}
&lt/脚本>
&lt/车身>
&lt/html&gt

此web应用位于:https://popping-heat-6062.firebaseapp.com/

我的简单反应本机应用程序

导入React,{Component}来自“React”;
从“react native”导入{AppRegistry、Text、View、TouchableHighlight、WebView};
导出默认类WevViewApp扩展组件{
建造师(道具){
超级(道具);
this.webView=null;
}
onMessage(事件){
console.log(“在消息上”,event.nativeEvent.data);
}
sendPostMessage(){
console.log(“发送邮件”);
this.webView.postMessage(“来自react native的Post消息”);
}
render(){
返回(
<视图样式={flex:1}}>
<TouchableHighlight style={{{padding:10,backgroundColor:'blue',marginTop:20}}onPress={()=>this.sendPostMessage()}>
<Text style={{color:'white'}}>从react native发送帖子</Text>
</TouchableHighlight>
<网络视图
style={{flex:1}}
source={{uri:'https://popping-heat-6062.firebaseapp.com'}}
ref={(webView)=>this.webView=webView}
onMessage={this.onMessage}
/&燃气轮机;
</View>
);
}
}
AppRegistry.registerComponent('WevViewApp',()=>WevViewApp);

预期结果

  1. 单击“从web发送邮件”按钮发送
    向React本机应用程序发送post消息,并登录到调试器
    窗口
  2. 单击“从React Native发送邮件”按钮
    向web应用程序发送post消息并在web中打印出来
    文本区

实际结果

  1. Web应用成功向React本机应用发送消息,并登录到调试器窗口
  2. React Native app未成功将消息发送到web app,并且未在web文本区域中打印出来

有人知道为什么web应用程序没有收到消息吗

用Android和iOS进行测试

相关文件:https://facebook.github.io/react-native/docs/webview.html


那是一个很强的问题

在web浏览器中直接测试“从web发送邮件”按钮时,textarea会记录它已发送的邮件以及收到的自己的邮件

周四2016年12月15日10:20:34 GMT+0100(CET)从网络发送邮件。。
2016年12月15日星期四10:20:34 GMT+0100(CET)网上发布消息

从React本机应用程序在WebView中尝试相同操作时,textarea仅打印出来

周四2016年12月15日10:20:34 GMT+0100(CET)从网络发送邮件。。

WebView是否劫持window.postMessage方法并注入自定义方法

文件中提到了这一点:

设置此属性将向您的
webview,但仍将调用postMessage的预先存在的值

也许这是错误的,这就是问题所在

我也遇到了同样的问题,并通过将事件侦听器添加到文档而不是窗口来修复它。更改:

窗口。addEventListener(“消息”。。。

致:

文档。添加的文本列表(“消息”。。。

发表评论