我使用 React Native webview 来显示 index.html，HTML 将向应用程序发布消息。然后应用程序将接收消息并将其写入控制台。问题是当 postMessage 立即在头上运行时，应用程序无法接收消息。我认为这可能与 HTML 未完成加载有关。然后我使用 setTimeout 延迟，它起作用了。
现在我想知道:
- 有没有更好的方法来解决这个问题？
- 为什么延迟 100 毫秒不起作用，而延迟 200 毫秒却起作用？
我使用的是 React Native 版本 0.39.0 和 Node 版本 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>
索引.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);
React 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
最佳答案
我相信您现在已经找到了答案，但如果您还没有找到答案，或者如果其他人有需要，请查看 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.');
});
关于javascript - react native html postMessage 无法到达 WebView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41256219/