реакция родной html postMessage не может добраться до WebView

Я использую React Native webview для отображения index.html, а HTML отправит сообщение в приложение. Затем приложение получит сообщение и напишет его на консоль. Проблема в том, что приложение не может получать сообщения, когда postMessage сразу запускается на голове. Я думаю, это может быть связано с HTML не закончил загрузку. Затем я использовал задержку с setTimeout, и это сработало.реакция родной html postMessage не может добраться до WebView

Теперь я хочу знать:

Есть ли лучший способ решить эту проблему?
Почему задержка 100 миллисекунд не работала, но задержка 200 миллисекунда?

Я использую React родной версии 0.39.0 и версию узла 7.2.0.

Вот код, который я до сих пор:

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

Реагировать Native 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 консоль

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

источник

2016-12-21 liupeixin

Я уверен, что Вы нашли ответ на свой вопрос сейчас, но в случае, если вы не были или если другие люди нуждаются затем проверить 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

источник

2017-08-09 18:26:28 Seth

реакция родной html postMessage не может добраться до WebView

ответ

Смежные вопросы