reagieren nativen HTML postmessage nicht zu WebView erreichen

Ich benutze Reagieren Mutter webview index.html zu zeigen, und HTML wird messge an die App veröffentlichen. Die App empfängt dann die Nachricht und schreibt sie in die Konsole. Das Problem ist, dass die App Nachrichten nicht empfangen kann, wenn postMessage sofort auf Kopf ausgeführt wird. Ich denke es hängt vielleicht mit HTML zusammen, das nicht fertig geladen wurde. Ich habe dann eine Verzögerung mit setTimeout verwendet, und es hat funktioniert.reagieren nativen HTML postmessage nicht zu WebView erreichen

Jetzt möchte ich wissen:

Gibt es eine bessere Möglichkeit, dieses Problem zu lösen?
Warum hat die Verzögerung 100 milliscond nicht funktionieren, aber verzögern 200 milliscond tat?

Ich verwende React Native Version 0.39.0 und Node Version 7.2.0. Hier

ist der Code Ich habe bisher:

index.html

<head> 
<title>Index</title> 
<script type="text/javascript" src="index.js"></script> 
<script type="text/javascript"> 
    // can not be received 
    postMessage('send to react native from index inline, no delay', '*'); 

    // can not be received 
    setTimeout(function(){ 
     postMessage('send to react native from index inline, delay 0 milliscond', '*') 
    }, 0); 

    // can received 
    setTimeout(function(){ 
     postMessage('send to react native from index inline, delay 100 milliscond', '*') 
    }, 100); 

    onload = function() { 
     // can not be received 
     postMessage('send to react native from index inline after onload, no delay', '*') 

     // can received 
     setTimeout(function() { 
      postMessage('send to react native from index inline after onload, delay 0 milliscond', '*') 
     }, 0); 
    }; 
</script>

index.js

// can not be received 
postMessage('send to react native from index.js, no delay', '*'); 

// can not be received 
setTimeout(function() { 
    postMessage('send to react native from index.js, delay 100 milliscond', '*') 
}, 100); 

// can received 
setTimeout(function() { 
    postMessage('send to react native from index.js, delay 200 milliscond', '*') 
}, 200);

Reagieren india web_view_page.js

return (
     <WebView 
      source={{uri: 'http://127.0.0.1:8000/index.html'}} 
      onMessage={(event) => console.log('onMessage:', event.nativeEvent.data)}/> 
    );

Chrome Konsolenprotokoll

2016-12-21 11:45:02.367 web_view.js:147 onMessage: send to react native from index inline after onload, delay 0 milliscond 
2016-12-21 11:45:02.491 web_view.js:147 onMessage: send to react native from index inline, delay 100 milliscond 
2016-12-21 11:45:02.628 web_view.js:147 onMessage: send to react native from index.js, delay 200 milliscond

Quelle

2016-12-21 liupeixin

Ich bin sicher, dass Sie Ihre Antwort jetzt gefunden haben, aber im Fall Sie haben nicht oder wenn andere Menschen in Not sind, dann https://github.com/facebook/react-native/issues/11594 überprüfen.

Grundsätzlich müssen Sie warten, bis die postMessage im Fenster vorhanden sein, bevor wir erfolgreich Nachrichten veröffentlichen können.

function onBridgeReady(cb) { 
    if (window.postMessage.length !== 1) { 
    setTimeout(function() { 
     onBridgeReady(cb) 
    }, 100); 
    } else { 
    cb(); 
    } 
} 

onBridgeReady(function() { 
    window.postMessage('Bridge is ready and WebView can now successfully receive messages.'); 
});

Quelle: Andrei Barabas

Quelle

2017-08-09 18:26:28 Seth

reagieren nativen HTML postmessage nicht zu WebView erreichen

Antwort

Verwandte Themen