react-native使用react-native-webview与vue通信问题？

  • Z时代
  • 2024-02-29
  • 分类：IT

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

以上两种方式在iphone上\华为\一加手机上都生效.用什么区分该用哪种方法?

以上是 react-native使用react-native-webview与vue通信问题？ 的全部内容， 来源链接： utcz.com/p/935240.html

回到顶部