14
React Native WebView postMessageを動作させることができません。 React Nativeアプリは、Webアプリからポストメッセージ送信を正常に受信します。しかし、WebアプリはReact Nativeアプリからのメッセージを受信しません。このウェブアプリがでホストされているReact Native 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>：https://popping-heat-6062.firebaseapp.com/
私のシンプルな
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);
期待される結果
- が反応ネイティブアプリに ポストメッセージを送信し、「からポストメッセージを送信]をクリックデバッガ ウィンドウ
- に記録されますネイティブの反応」ボタン は、Webアプリケーションへのポストメッセージを送信し、ウェブ テキストエリアにプリントアウトされ
- Webアプリケーションが正常にネイティブアプリを反応させるために、メッセージを送信し、デバッガウィンドウ
- にログインしている送信実際の結果が失敗したネイティブアプリに反応 Webアプリケーションにメッセージを送信し、中にプリントアウトされていませんウェブテキストエリア
ウェブアプリケーションがメッセージを受信しない理由を知っている人はいますか？
AndroidとiOSの両方でテスト済みです。
関連資料：https://facebook.github.io/react-native/docs/webview.html
編集：問題を特定する行動を経験しました。
ウェブブラウザで[投稿メッセージをウェブから送信]ボタンを直接テストすると、テキストエリアはメッセージを送信したことを記録し、メッセージも受信します。リアクトネイティブアプリからのWebViewで同じことをしようとしたとき
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
TEXTAREAは唯一のWebViewののwindow.postMessage方法をハイジャックし、カスタム1を注入してい
Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..
を出力しますか？
これはdocumentationに記載されている：このプロパティを設定する
はあなた のWebViewにグローバルのpostMessageを注入しますが、それでものpostMessageの既存の値を呼び出します。
多分これは偽であり、これはどこに問題がありますか？
私は同じ問題を持っているが、回避策を探して一日を過ごしたが、いずれかが存在しない場合、プロセス内のプル要求があり、私たちが得るかもしれいくつかの解決策。 https://github.com/facebook/react-native/pull/10941 –