反应原生 html postMessage 无法到达 WebView
Posted
技术标签:
【中文标题】反应原生 html postMessage 无法到达 WebView【英文标题】：react native html postMessage can not reach to WebView 【发布时间】：2017-05-06 11:45:25 【问题描述】：我使用 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>
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);
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
【问题讨论】：
【参考方案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
【讨论】：
以上是关于反应原生 html postMessage 无法到达 WebView的主要内容，如果未能解决你的问题，请参考以下文章
在对 GoogleVisionBarcodes 的原生相机做出反应时检测到无法在 IOS 上运行
Wordpress定制器自定义控件传输postMessage无法正常工作