web-dev-qa-db-fra.com

React Native WebView postMessage ne fonctionne pas

Je ne parviens pas à faire fonctionner React Native WebView postMessage. L'application React Native reçoit correctement le message de message envoyé par l'application Web. Mais l'application Web ne ne pas recevoir de messages envoyés depuis l'application React Native.

Mon application web simple 

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

Cette application web est hébergée à: https://popping-heat-6062.firebaseapp.com/

Mon simple React Application 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 );

Résultat attendu

  1. En cliquant sur le bouton "Envoyer un message à partir du Web", un message est envoyé à l'application React Native et est connecté dans la fenêtre du débogueur
  2. En cliquant sur le bouton "Envoyer un message depuis React Native", un message est envoyé à l'application Web et imprimé dans la zone de texte Web.

Résultat réel

  1. L'application Web a réussi envoie un message à React Application native et est enregistrée dans la fenêtre du débogueur
  2. Réagir l'application native sans succès envoie un message à l'application Web et n'est pas imprimé dans la zone de texte Web

Quelqu'un sait-il pourquoi l'application Web ne reçoit pas les messages?

Testé avec les deux Android et iOS.

Documentation connexe: https://facebook.github.io/react-native/docs/webview.html

Modifier : a rencontré un comportement qui peut identifier le problème.

Lorsque vous testez le bouton "Envoyer un message depuis le Web" directement dans un navigateur Web, la zone de texte enregistre qu'il a envoyé le message et qu'il a également reçu son propre 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

lors de la même tentative dans WebView à partir de l'application React Native, la zone de texte ne s'imprime que

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

Est-ce que WebView détourne la méthode window.postMessage et en injecte une personnalisée?

Ceci est mentionné dans la documentation :

La définition de cette propriété injectera un global postMessage dans votre vue Web, mais appellera toujours des valeurs préexistantes de postMessage.

C'est peut-être faux et c'est là que se situe le problème?

javascripthtml5webviewreact-native
20
Skarbo

J'ai eu le même problème et l'ai résolu en ajoutant l'écouteur d'événements au document au lieu de la fenêtre. Changement:

window.addEventListener("message", ...

à:

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

Version 5 de react-native-webview modifie le fonctionnement de ce comportement . Vous voulez maintenant:

window.ReactNativeWebView.postMessage(data);
15
AdamG