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/

相关推荐
谢尔登13 小时前
【React Native】布局和 Stack 、Slot
javascript·react native·react.js
Misha韩13 小时前
React Native 基础tabBar和自定义tabBar - bottom-tabs
android·react native
wayne2142 天前
从零开始学习 Redux:React Native 项目中的状态管理
学习·react native·react.js
OEC小胖胖2 天前
React Native 在 Web 前端跨平台开发中的优势与实践
前端·react native·react.js·前端框架·web
henujolly2 天前
react native学习record one month
学习·react native·react.js
wayne2143 天前
跨平台移动开发技术深度分析:uni-app、React Native与Flutter的迁移成本、性能、场景与前景
react native·架构
谢尔登3 天前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
谢尔登5 天前
【React Native】样式、网络请求和Loading
网络·react native·react.js
天平6 天前
react native现代化组件库的推荐 【持续更新...】
android·前端·react native
沐言人生6 天前
RN学习笔记——1.RN环境搭建和踩坑
前端·react native