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

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

回到顶部