react-native-webview使用postMessage后H5不能监听问题（iOS和安卓的兼容问题）-Toy模板网

这篇具有很好参考价值的文章主要介绍了react-native-webview使用postMessage后H5不能监听问题（iOS和安卓的兼容问题）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

chatgpt:

https://chat.xutongbao.top/文章来源地址https://www.toymoban.com/news/detail-652822.html

/* 监听rn消息 */
const eventListener = nativeEvent => {
    //解析数据actionType、extra
    const {actionType, extra} = nativeEvent.data && JSON.parse(nativeEvent.data) || {}
}
//安卓用document，ios用window
window.addEventListener('message', eventListener);
document.addEventListener('message', eventListener);

import uaParser from 'ua-parser-js'

let timer
let ua = uaParser(navigator.userAgent)

const handleWatchRNMessage = () => {
  if (window.ReactNativeWebView) {
    window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'getToken' }))
  }

  const eventListener = (e) => {
    console.log('message', e.data)
    let payload = e.data ? JSON.parse(e.data) : {}
    let type = payload.type

    if (type === 'getToken') {
      localStorage.setItem('token', payload.token)
    } else if (type === 'getBrowserInfo') {
      const { browser } = ua
      window.ReactNativeWebView.postMessage(JSON.stringify({ type, browser }))
    }
  }

  if (window.platform === 'rn') {
    if (ua.os.name === 'iOS') {
      window.addEventListener('message', eventListener)
    } else {
      window.document.addEventListener('message', eventListener)
    }
  }
}

handleWatchRNMessage()

react-native-webview使用postMessage后H5不能监听问题（iOS和安卓的兼容问题）,web前端,react native