javascript - react-native-webview与vue页面通信问题？

Question

react-native项目中使用react-native-webview嵌入vue页面，两种方式,在不同机型上无效.

方式一:直接使用window.postMessage(例如在 vivo z3手机(android9) 上vue页面监听方法不执行)

rn页面:      function injectJavascriptFun(params) {        const str = `(function() {          window.postMessage(1);        })()`;        injectJavaScript(str);      }vue页面:  window.addEventListener('message', (event) => {})

方式二:使用window.WebViewBridge.onMessage(例如在 小米手机(android13) 上vue页面监听方法不执行)

rn页面: function injectJavascriptFun(params) {      const str = `(function() {       window.WebViewBridge.onMessage(${JSON.stringify(params)});      })()`;      injectJavaScript(str);    }    injectJavascriptFun(sendData);vue页面:  window.WebViewBridge = {    onMessage:function (data){      store.commit('user/setRNWebview', data)    }  }  const event = new Event('WebViewBridge')  window.dispatchEvent(event);

以上两种方式在其他一些测试机例如iphone15pro、一加（android13），华为手机上都生效，该用什么区分调用两种方法呢？

Answer 1

如果两个项目跨域了,那么通讯肯定是不行的,你只要保证两个项目没跨域,解决方案就很容易

Answer 2

这个问题看起来是在使用 React Native 的 WebView 组件来加载 Vue 页面时，出现了通信问题。我会尝试给出一些可能的解决方案。

首先，关于方式一，即使用 window.postMessage 的问题，这个方法依赖于浏览器的 postMessage API，它允许一个窗口向另一个窗口发送消息。然而，如果你在 Android 手机上遇到问题，这可能是由于不同 Android 版本之间浏览器实现差异所导致的。你可能需要检查你的 Android 版本是否支持 postMessage API，或者尝试更新你的 WebView 组件。

对于方式二，即使用 window.WebViewBridge.onMessage，这个方法依赖于 WebViewBridge，它是一个用于 WebView 和 JavaScript 之间的通信的库。如果你在 Android 手机上遇到问题，这可能是由于 WebViewBridge 的兼容性问题。你可能需要检查你的 WebViewBridge 版本是否与你的 Android 版本兼容，或者尝试更新你的 WebViewBridge。

另外，这两种方式都需要在 Vue 页面中监听消息，如果 Vue 页面没有正确地监听消息，那么消息就可能无法被正确地接收。请确保你在 Vue 页面中正确地设置了事件监听器。

最后，如果你仍然遇到问题，你可能需要尝试使用其他方式来实现 React Native 和 Vue 之间的通信，例如使用 WebSocket 或者 HTTP 请求。