2016-12-21 26 views
9

React Native webviewを使ってindex.htmlを表示すると、HTMLがアプリに送信されます。アプリはメッセージを受信して​​コンソールに書き出します。問題は、postMessageが直ちにヘッドで実行されたときに、アプリケーションがメッセージを受信できないことです。私は多分それがHTMLに終わったロードに関連していると思う。私はsetTimeoutで遅延を使用し、それは働いた。反応しないネイティブhtml postMessageはWebViewに届きません

今、私が知りたい:

  • は、この問題を解決するためのより良い方法はありますか?
  • 遅延が100ミリオンでは機能しませんでしたが、遅延が200ミリ秒でしたか?

私はReact Nativeバージョン0.39.0とNodeバージョン7.2.0を使用しています。ここで

は私が持っているコードは、これまでです:

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

がネイティブweb_view_page.js

に反応

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 10

クロームコンソールログ

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 

答えて

1

私は、あなたが今では、あなたの答えを見つけたと確信しているが、イベントでは、あなたが持っていないか、他の人が必要としているならば、https://github.com/facebook/react-native/issues/11594をチェックしてください。

メッセージを正常に投稿するには、基本的にウィンドウにpostMessageが存在するまで待つ必要があります。

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.'); 
}); 

出典:Andrei Barabas

関連する問題