Tôi không thể tải React Native WebView postMessage to work. Ứng dụng React Native đã nhận thành công tin nhắn gửi bài đăng từ ứng dụng web. Nhưng ứng dụng web không nhận được tin nhắn từ ứng dụng React Native.React Native WebView postMessage không hoạt động
ứng dụng web đơn giản của tôi
<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>ứng dụng web này được lưu trữ tại địa chỉ: https://popping-heat-6062.firebaseapp.com/
đơn giản của tôi Phản ứng ứng dụng 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);
Dự kiến kết quả
- Nhấp vào "Gửi bài nhắn từ web" nút gửi nhắn đường bưu điện đến Phản ứng ứng dụng Native và được ghi lại trong debugger cửa sổ
- Nhấp vào "Gửi bài thông điệp từ phản ứng Native" nút gửi một thông điệp đường bưu điện đến ứng dụng web và được in ra trong các trang web textarea
kết quả thực tế
- ứng dụng Web thành công gửi gửi thông điệp tới Phản ứng ứng dụng Native và được đăng nhập trong cửa sổ gỡ lỗi
- Phản ứng Native app không thành công gửi thông điệp tới ứng dụng web và không được in ra trong web textarea
Có ai biết tại sao ứng dụng web không nhận được tin nhắn không?
Đã thử nghiệm với cả Android và iOS.
tài liệu liên quan: https://facebook.github.io/react-native/docs/webview.html
Sửa: Trải qua một hành vi có thể xác định được vấn đề.
Khi kiểm tra nút 'Gửi bài đăng từ web' trực tiếp trong trình duyệt web, các bản ghi văn bản đã gửi thư và cũng nhận được thư của chính thư đó.
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
khi cố gắng cùng trong WebView từ các ứng dụng Native Phản ứng của textarea chỉ in ra
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
Liệu WebView chiếm quyền điều khiển phương pháp window.postMessage và tiêm một tùy chỉnh một?
này được đề cập trong documentation:
Thiết khách sạn này sẽ bơm một postMessage toàn cầu vào webview của bạn, nhưng vẫn sẽ gọi giá trị tồn tại từ trước của postMessage.
Có thể đây là sai và đây là vấn đề ở đâu?
Tôi có cùng một vấn đề, đã dành cả ngày tìm kiếm một workaround nhưng, không có bất kỳ, có một yêu cầu kéo trong quá trình có thể chúng tôi nhận một số giải pháp. https://github.com/facebook/react-native/pull/10941 –