react-native-webview使用postMessage后H5不能监听问题(iOS和安卓的兼容问题)

javascript 复制代码
/* 监听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);
javascript 复制代码
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()

参考链接:

https://blog.csdn.net/liuxingyuzaixian/article/details/125199131

https://chat.xutongbao.top/

相关推荐
老码沉思录1 天前
React Native 全栈开发实战班 - 性能与调试之打包与发布
javascript·react native·react.js
老码沉思录2 天前
React Native 全栈开发实战班 - 性能与调试之内存管理
javascript·react native·react.js
前端郭德纲2 天前
ReactNative的环境搭建
javascript·react native·react.js
前端郭德纲3 天前
React Native的开发流程是怎样的?
javascript·react native·react.js
老码沉思录3 天前
React Native 全栈开发实战班 - 原生功能集成之权限管理
javascript·react native·react.js
小纯洁w3 天前
React Native的`react-native-reanimated`库中的`useAnimatedStyle`钩子来创建一个动画样式
javascript·react native·react.js
前端郭德纲3 天前
React Native的界面与交互
react native·react.js·交互
MavenTalk3 天前
React可以做全栈开发吗
前端·react native·react.js·前端框架·全栈开发
努力学前端Hang3 天前
react native 安装好apk后无法打开
javascript·react native·react.js
老码沉思录4 天前
React Native 全栈开发实战班 - 打包发布之热更新
javascript·react native·react.js