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

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上\华为\一加手机上都生效.用什么区分该用哪种方法?

阅读 360
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏