web-dev-qa-db-ja.com

ReactネイティブWebView postMessageは機能しません

ReactネイティブWebView postMessageが機能しません。 Reactネイティブアプリは、Webアプリから送信されたポストメッセージを正常に受信します。ただし、WebアプリはReactネイティブアプリから送信されたメッセージを受信しません。

私のシンプルなウェブアプリ

<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 );

期待される結果

  1. [Webから投稿メッセージを送信]ボタンをクリックすると、投稿メッセージがReactネイティブアプリに送信され、デバッガウィンドウに記録されます。
  2. [React Nativeから投稿メッセージを送信する]ボタンをクリックすると、Webアプリに投稿メッセージが送信され、Webテキストエリアに印刷されます

実際の結果

  1. Webアプリが正常に送信メッセージをReactネイティブアプリに送信し、デバッガウィンドウに記録されます
  2. React NativeアプリunsuccessfullyはWebアプリにメッセージを送信し、Webテキストエリアに印刷されません

Webアプリがメッセージを受信しない理由を誰か知っていますか？

AndroidとiOSの両方でテスト済み。

関連ドキュメント： https://facebook.github.io/react-native/docs/webview.html

Edit：問題を特定できる動作を経験しました。

Webブラウザーで「Webから投稿メッセージを送信」ボタンを直接テストする場合、textareaはメッセージを送信したことと、受信したメッセージをログに記録します。

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ネイティブアプリからWebViewで同じことをしようとすると、textareaだけが印刷されます

Thu Dec 15 2016 10:20:34 GMT+0100 (CET) Sending post message from web..

WebViewはwindow.postMessageメソッドをハイジャックし、カスタムメソッドを挿入しますか？

これは documentation で言及されています：

このプロパティを設定すると、webViewにpostMessageグローバルが挿入されますが、postMessageの既存の値が呼び出されます。

たぶんこれは偽であり、これは問題がどこにあるのでしょうか？

javascripthtml5webviewreact-native
20
Skarbo

同じ問題があり、ウィンドウの代わりにドキュメントにイベントリスナーを追加することで修正しました。変化する：

window.addEventListener("message", ...

に：

document.addEventListener("message", ...
47
JustWonder

React-native-webviewのバージョン5 この動作の動作を変更 。あなたが今欲しい：

window.ReactNativeWebView.postMessage(data);
15
AdamG