React Native WebView postMessage 不起作用 [英] React Native WebView postMessage does not work
问题描述
我无法让 React Native WebView postMessage 工作.React Native 应用程序成功接收到来自 Web 应用程序的 post 消息.但是 Web 应用程序不会接收从 React Native 应用程序发送的消息.
I can't get React Native WebView postMessage to work. The React Native app successfully receives the post message sendt from the web app. But the web app does not receive messages sendt from the React Native app.
我的简单网络应用
<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 + "
");
}
</script>
</body>
</html>此网络应用托管在:https://popping-heat-6062.firebaseapp.com/
我的简单 React Native 应用
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 );
预期结果
- 点击从网络发送帖子消息"按钮发送向 React Native 应用程序发送消息并登录调试器窗口
- 点击从 React Native 发送帖子消息"按钮向网络应用程序发送帖子消息并在网络中打印出来文本区域
实际结果
- Web 应用成功向 React Native 应用发送消息并登录到调试器窗口
- React Native 应用未成功向网络应用发送消息并且未在网络文本区域中打印出来
- Web app successfully sends sends message to React Native app and is logged in the debugger window
- React Native app unsuccessfully sends message to web app and is not printed out in the web textarea
有谁知道为什么网络应用没有收到消息?
Does anyone know why the web app is not receiving the messages?
已在 Android 和 iOS 上进行测试.
Tested with both Android and iOS.
相关文档:https://facebook.github.io/react-native/docs/webview.html
编辑:经历过可能查明问题的行为.
Edit: Experienced a behaviour that may pinpoint the problem.
当直接在 Web 浏览器中测试从 Web 发送帖子消息"按钮时，文本区域会记录它已发送的消息以及收到的消息.
When testing the 'Send post message from web' button directly in a web browser the textarea logs that it has sendt the message and also that is received it's own message.
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
在 React Native 应用程序的 WebView 中尝试相同的操作时，textarea 只会打印出来
when trying the same in the WebView from the React Native app the textarea only prints out
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
WebView 是否会劫持 window.postMessage 方法并注入自定义方法?
Does the WebView hijack the window.postMessage method and inject a custom one?
文档中提到了这一点:
设置这个属性会注入一个 postMessage 全局到你的webview，但仍会调用 postMessage 的预先存在的值.
Setting this property will inject a postMessage global into your webview, but will still call pre-existing values of postMessage.
也许这是错误的，这就是问题所在?
Maybe this is false and this is where the problem is at?
推荐答案
我遇到了同样的问题，并通过将事件侦听器添加到文档而不是窗口来修复它.更改:
I had the same problem and fixed it by adding the event listener to the document instead of the window. Change:
window.addEventListener("message", ...
到:
document.addEventListener("message", ...
这篇关于React Native WebView postMessage 不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
