React本机WebView postMessage不工作
我的简单web应用程序
<html>
<body>
<button>Send post message from web</button>
<div>Post message log</div>
<textarea style="height: 50%; width: 100%;" readonly></textarea>
<script>
var log = document.querySelector("textarea");
document.querySelector("button").onclick = function() {
console.log("Send post message");
logMessage("Sending post message from web..");
window.postMessage("Post message from web", "*");
}
window.addEventListener("message", function(event) {
console.log("Received post message", event);
logMessage(event.data);
}, false);
function logMessage(message) {
log.append((new Date()) + " " + message + "\n");
}
</script>
</body>
</html>此web应用程序托管在:https://popping-heat-6062.firebaseapp.com/
我的简单React本机应用程序
import React, {Component} from "react";
import {AppRegistry, Text, View, TouchableHighlight, WebView} from "react-native";
export default class WevViewApp extends Component {
constructor( props ) {
super( props );
this.webView = null;
}
onMessage( event ) {
console.log( "On Message", event.nativeEvent.data );
}
sendPostMessage() {
console.log( "Sending post message" );
this.webView.postMessage( "Post message from react native" );
}
render() {
return (
<View style={{flex: 1}}>
<TouchableHighlight style={{padding: 10, backgroundColor: 'blue', marginTop: 20}} onPress={() => this.sendPostMessage()}>
<Text style={{color: 'white'}}>Send post message from react native</Text>
</TouchableHighlight>
<WebView
style={{flex: 1}}
source={{uri: 'https://popping-heat-6062.firebaseapp.com'}}
ref={( webView ) => this.webView = webView}
onMessage={this.onMessage}
/>
</View>
);
}
}
AppRegistry.registerComponent( 'WevViewApp', () => WevViewApp );
预期结果
-
null
实际效果
- Web应用程序成功地将发送消息发送到响应本机应用程序，并将消息记录在调试器窗口中
- React本机应用程序未成功将消息发送到web应用程序，并且未在web文本中打印出来
有人知道为什么web应用程序没有收到消息吗？
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Post message from web
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
WebView是否劫持Window.PostMessage方法并注入自定义方法？
文档中提到了这一点：
设置此属性将向webview中注入postMessage全局值，但仍将调用postMessage的预先存在值。
也许这是错误的，这就是问题所在？
共有1个答案
我也遇到了同样的问题，并通过将事件侦听器添加到文档中而不是窗口中来修复它。变化：
window.addEventListener("message", ...
document.addEventListener("message", ...
-
但现在我正试图从yarn add@react native community/async storage添加异步存储，这给了我一个错误。它没有添加到我的项目中。 我在安装软件包时并没有收到任何错误，但它并没有添加到软件包中。json文件我还尝试添加本机基，然后运行react-native链接，该链接也没有添加到包中。json，它也给了我错误： > 警告包@react native communi
-
从“React-Native”导入React，{组件，样式表，文本，触摸高亮显示，文本输入，视图，列表视图，警报}； var LongButton=require('./LongButton.js')； 类SurveyQn扩展组件{ ListView项：LongButton “严格使用” 从“React-Native”导入React，{组件，样式表，文本，触摸亮点，视图，}； 更新：我试过了，但也
-
你好，我正面临一个问题与世博反应本地。每当我试图启动iOS模拟器。我得到这个错误： 世博会结果截图 我的NPM版本是6.7。0本机cli:2.0。1:0.57。1世博会版本2.11。9 此外，我还确保我在Xcode上的命令行工具是完全由Xcode命令行工具设置的 最后，我还尝试运行命令 什么都不管用。。
-
对不起我的英语，这是我的第一个问题 嗨，我创建了一个issus https://github.com/facebook/react-native/issues/4124 我可以运行完美的react-native start/react-native run-android，它工作得很好 null 3-将签名配置添加到应用程序的gradle配置（android/app/build.gradle） 启
-
在这件事上被困了好几天。所以，我使用这个包来实现本地推送通知： https://github.com/zo0r/react-native-push-notification 我可以像这样获得本地计划通知： 我想在用户点击通知和应用程序打开时调用一个函数。为了实现以下目标，我在我的pp.js中这样做了： 但是，函数不会被调用。 我已经回答了以下几个问题，但是运气不好。 在通知上的本机消息推送不触发
-
在这个构建中使用了不推荐的Gradle特性，使其与Gradle7.0不兼容。使用“--Warning-Mode All”显示各个弃用警告。请参见https://docs.gradle.org/6.5/userguide/command_line_interface.html#sec:command_line_warnings440可操作任务：22个已执行，418最新注意:c:\users\stef