当前位置:首页 > React

react native 推送实现

2026-01-26 21:17:18React

集成 Firebase Cloud Messaging (FCM)

安装 Firebase 依赖库并配置 Android/iOS 项目。对于 Android,需在 android/app/build.gradle 中添加 Firebase SDK 依赖。iOS 需通过 CocoaPods 安装 Firebase 并配置 GoogleService-Info.plist 文件。

yarn add @react-native-firebase/app @react-native-firebase/messaging

请求推送权限

在应用启动时请求用户通知权限(iOS 需显式调用,Android 默认授予)。使用 messaging().requestPermission() 检查权限状态,并在权限授予后获取设备 token。

react native 推送实现

import messaging from '@react-native-firebase/messaging';

async function requestUserPermission() {
  const authStatus = await messaging().requestPermission();
  const enabled = 
    authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
    authStatus === messaging.AuthorizationStatus.PROVISIONAL;
  if (enabled) {
    const token = await messaging().getToken();
    console.log('FCM Token:', token);
  }
}

处理前台和后台消息

通过 messaging().onMessage 监听前台通知,使用 setBackgroundMessageHandler 处理后台消息。需在 index.js 中注册后台处理器。

react native 推送实现

// 前台消息处理
messaging().onMessage(async remoteMessage => {
  console.log('Foreground Message:', remoteMessage);
});

// 后台消息处理(需在 index.js 中注册)
messaging().setBackgroundMessageHandler(async remoteMessage => {
  console.log('Background Message:', remoteMessage);
});

处理通知点击

使用 messaging().getInitialNotification() 获取应用关闭时点击的通知数据,通过 messaging().onNotificationOpenedApp 监听应用处于后台时的点击事件。

// 检查初始通知
messaging().getInitialNotification().then(remoteMessage => {
  if (remoteMessage) {
    console.log('Launched by notification:', remoteMessage);
  }
});

// 监听通知点击
messaging().onNotificationOpenedApp(remoteMessage => {
  console.log('Notification clicked:', remoteMessage);
});

测试推送通知

通过 Firebase 控制台或 Postman 调用 FCM API 发送测试通知。需使用设备 token 和服务器密钥(可在 Firebase 项目设置中获取)。

# 示例 cURL 命令
curl -X POST \
  -H "Authorization: key=<SERVER_KEY>" \
  -H "Content-Type: application/json" \
  -d '{
    "to": "<DEVICE_TOKEN>",
    "notification": {
      "title": "Test Title",
      "body": "Test Body"
    }
  }' \
  https://fcm.googleapis.com/fcm/send

注意事项

  • Android 配置:确保 android/app/src/main/AndroidManifest.xml 包含正确的 intent-filterservice 声明。
  • iOS 证书:需在 Apple Developer 后台配置 APNs 证书并上传至 Firebase。
  • 调试:使用 adb logcat 或 Xcode 控制台查看推送日志。

标签: reactnative
分享给朋友:

相关文章

如何下载react

如何下载react

下载 React 的方法 通过 npm 或 yarn 安装 React 可以通过包管理器 npm 或 yarn 安装。确保已安装 Node.js(包含 npm),然后在项目目录中运行以下命令:…

react如何衰减

react如何衰减

React 中的动画衰减效果实现 在 React 中实现衰减效果(如滚动衰减、拖动释放后的惯性滑动)通常需要结合物理动画原理或第三方动画库。以下是几种常见方法: 使用 CSS 动画和 @keyfra…

react如何运行

react如何运行

运行React项目的步骤 安装Node.js 确保系统已安装Node.js(建议版本12以上),可从官网下载并安装。Node.js自带npm包管理器,用于后续依赖安装。 创建React项目 使用官方…

react 如何跳转

react 如何跳转

使用 React Router 进行页面跳转 React 应用中通常使用 react-router-dom 库实现页面跳转。以下是几种常见的跳转方式: 安装依赖 npm install react…

odyssey react 如何

odyssey react 如何

Odyssey React 是耐克推出的一款跑鞋系列,以其轻量化设计和React泡沫缓震技术著称。以下是关于该系列鞋款的主要特点和使用建议: 核心特点 React泡沫中底提供出色的能量回馈和缓震效果…

如何部署react项目

如何部署react项目

部署 React 项目到生产环境 方法一:使用静态服务器部署(如 Nginx、Apache) 构建生产版本:运行 npm run build 或 yarn build,生成优化后的静态文件(位于 b…