Réagir Natif WebView postMessage ne fonctionne pas

Je ne peux pas Réagir Natif WebView postMessage de travail. La Réagir application Native avec succès reçoit le message envoyer à partir de l'application web. Mais l'application web ne reçoit pas de messages à envoyer à partir du Réagir application Native.

Mon simple application web

HTML:

<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é chez: https://popping-heat-6062.firebaseapp.com/

Mon simple Réagir 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

Cliquant sur "Envoyer un message à partir du web" bouton envoie
un message à Réagir application Native et est enregistré dans le débogueur
fenêtre
Cliquant sur "Envoyer un message à partir de Réagir Natif" bouton
envoie un message à l'application web et est imprimé dans le web
textarea

Résultat réel

Web app avec succès envoie envoie un message à Réagir application Native et est enregistré dans la fenêtre du débogueur
Réagir application Native en vain envoie un message à l'application web et n'est pas imprimé dans le web textarea

Personne ne sait pourquoi l'application web ne reçoit pas les messages?

Testé avec à la fois Android et iOS.

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

Modifier: Expérimenté, un comportement qui peut identifier le problème.

Lors du test de l' 'envoyer Envoyer de message à partir du web" bouton directement dans un navigateur web de la textarea journaux qu'il a envoyer le message, et aussi qui est reçu, il est 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

en essayant de même dans la WebView du Réagir application Native du textarea seulement imprime

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

La WebView détourner de la fenêtre.postMessage méthode et injecter un personnalisé?

Cela est mentionné dans l' la documentation:

La définition de cette propriété permettra d'injecter un postMessage global dans votre
webview, mais sera toujours appeler pré-existantes, les valeurs de postMessage.

Peut-être que c'est faux et c'est là que le problème est à l'?

J'ai le même problème, a passé toute la journée à chercher une solution de contournement mais, il n'y a pas tout, il y a une demande d'extraction dans le processus de peut-être obtenir une solution. github.com/facebook/react-native/pull/10941

InformationsquelleAutor Skarbo | 2016-12-15

46

J'ai eu le même problème et qu'il est corrigé par l'ajout de l'écouteur d'événement pour le document au lieu de la fenêtre. Modification:
```
window.addEventListener("message", ...
```
à:
```
document.addEventListener("message", ...
```
- Les travaux de cette. Merci. N'oubliez pas si vous souhaitez également en charge régulière des navigateurs, vous devrait à la fois de définir document.addEventListener("message", ... et window.addEventListener("message", ....
- Merci, cela a été très utile et m'a sauvé pas mal de temps, profiter de l'abondance.
- Quelqu'un peut-il expliquer cela?
- parce que c'est la façon dont il est mis en œuvre: github.com/facebook/react-native/blob/master/ReactAndroid/src/...
- Et pour iOS: github.com/facebook/react-native/blob/master/React/Views/...
- Sur ios uniquement de la fenêtre.la méthode addEventListener("message", ... travaillé. Je viens de mettre les deux en tant que @Skarbo suggéré.
InformationsquelleAutor JustWonder
7

La Version 5 de réagir-native-webview les changements de la façon dont ce comportement fonctionne. Vous voulez maintenant:
```
window.ReactNativeWebView.postMessage(data);
```
- sauvé ma journée merci
- épargnant de vie, les œuvres
InformationsquelleAutor AdamG

Vous devez vous connecter pour publier un commentaire.