Question

我正在尝试让React Native WebView组件（在iO上）与客户的网站协同工作。但是，postMessage似乎有问题。任何帮助将不胜感激。

网站的某些部分使用页面重新加载作为轮询机制。在WebView onLoad函数中，我需要执行一个注入的脚本来调用postMessage函数，以便与ReactNative应用程序就轮询状态进行通信。

问题是postMessage似乎以某种方式中断了轮询机制，结果该页面不再起作用。调用postMessage后，页面不再重新加载自身。我有些困惑，为什么postMessage会有这种不良的副作用。

在Webview上添加onNavigationStateChange处理程序后，我认为我有一个解释。我看到调用postMessage后，会触发onNavigationStateChange处理程序。相应事件对象中的url具有一个带有以下值的url属性：

react-js-navigation://postMessage?%7B%22msg%22%3A%22test%22%7D

可能是由于postMessage引起的导航更改事件中断了我的Web视图中站点的轮询机制。

任何人都可以告诉我我的假设是否正确，如果正确，有没有一种方法可以在不更改在Web视图中打开的网站中的代码的情况下解决此问题？

谢谢！

蒂姆

Answer 1

现在，我发现使用Webview的onNavigationStateChange道具的解决方案负责通过忽略在短时间间隔内相互跟踪的加载事件来检测“ onLoad”。类似于此剪贴簿实现：

handleOnContentNavigationStateChange = (navigationState) => {
    const shouldIgnore = state => {
        return (
            state.loading == true ||
            state.url.startsWith('react-js-navigation:')
        )
    };

    const self = this;

    if (!shouldIgnore(navigationState)) {
        if (self.timeout) {
            clearTimeout(self.timeout);
        }

        self.timeout = setTimeout(self.handleOnContentLoad, 1500);
    }
}

postMessage调用React本机WebView组件导致不必要的副作用

1 个答案: