我无法使React Native WebView postMessage正常工作。React本机应用程序成功接收来自web应用程序的post消息sendt。但是web应用程序不接收从React本机应用程序发送的消息
我的简单web应用程序
<;html>;
<;车身>;
<;按钮>;从web发送邮件</按钮>;
<;部门>;发布消息日志</部门>;
<;textarea style=“高度:50%;宽度:100%;”只读></textarea>;
<;脚本>;
var log=document.querySelector(“textarea”);
document.querySelector(“按钮”).onclick=function(){
console.log(“发送邮件”);
logMessage(“从web发送邮件…”);
window.postMessage(“从web发布消息”,“*”);
}
window.addEventListener(“消息”,函数(事件){
console.log(“收到的邮件”,事件);
日志消息(事件数据);
},假);
功能日志消息(消息){
log.append((新日期())+“”+消息+“\n”);
}
</脚本>;
</车身>;
</html>
此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);
预期结果
- 单击“从web发送邮件”按钮发送
向React本机应用程序发送post消息,并登录到调试器
窗口 - 单击“从React Native发送邮件”按钮
向web应用程序发送post消息并在web中打印出来
文本区
实际结果
- Web应用成功向React本机应用发送消息,并登录到调试器窗口
- 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(“消息”。。。
致:
文档。添加的文本列表(“消息”。。。