RN中如何处理推送通知（本地推送、远程推送），点击推送跳转指定页面？

在 React NativeRN中处理推送通知一般分为三块1️⃣ 本地推送Local Notification2️⃣ 远程推送Push Notification / FCM / APNs3️⃣ 点击通知跳转页面Deep Link / Navigation我给你按“工程实战”的方式讲直接能落地。一、常用方案选型目前主流有两套✅ 方案1推荐FirebaseFCM 推送react-native-firebaseNotifee处理本地通知 点击事件 优点稳定、功能全、可控性强企业项目首选方案2简单但旧react-native-push-notification 不太推荐维护一般二、基础架构你要理解推送流程服务端 - FCM/APNs - 手机 - RN App - 展示通知 - 用户点击 - 跳转页面关键点后台推送数据data payloadApp 收到后展示通知点击通知时解析数据并导航三、安装依赖推荐方案yarn add react-native-firebase/app yarn add react-native-firebase/messaging yarn add notifee/react-native四、远程推送FCM1️⃣ 请求权限import messaging from react-native-firebase/messaging; async function requestPermission() { const authStatus await messaging().requestPermission(); const enabled authStatus messaging.AuthorizationStatus.AUTHORIZED || authStatus messaging.AuthorizationStatus.PROVISIONAL; if (enabled) { console.log(授权成功); } }2️⃣ 获取 token发给后端const token await messaging().getToken(); console.log(FCM Token:, token);3️⃣ 前台接收消息messaging().onMessage(async remoteMessage { console.log(前台收到消息:, remoteMessage); // 用 Notifee 展示本地通知 });4️⃣ 后台/关闭状态处理messaging().setBackgroundMessageHandler(async remoteMessage { console.log(后台消息:, remoteMessage); });五、本地通知Notifee1️⃣ 创建通知import notifee from notifee/react-native; async function displayNotification(data) { await notifee.displayNotification({ title: data.title, body: data.body, android: { channelId: default, }, data: data, // 关键携带跳转参数 }); }2️⃣ 创建 channelAndroid 必须await notifee.createChannel({ id: default, name: Default Channel, });六、点击通知跳转页面重点这是你最关心的 核心思路 推送数据里带上跳转信息例如服务端 payload{ data: { type: order, orderId: 123 } }1️⃣ App 已打开前台点击notifee.onForegroundEvent(({ type, detail }) { if (type EventType.PRESS) { const data detail.notification?.data; handleNavigation(data); } });2️⃣ App 在后台点击通知notifee.onBackgroundEvent(async ({ type, detail }) { if (type EventType.PRESS) { const data detail.notification?.data; handleNavigation(data); } });3️⃣ App 被杀死冷启动const initialNotification await notifee.getInitialNotification(); if (initialNotification) { const data initialNotification.notification?.data; handleNavigation(data); }七、封装跳转逻辑React Navigationimport { navigationRef } from ./navigationRef; function handleNavigation(data) { if (!data) return; switch (data.type) { case order: navigationRef.navigate(OrderDetail, { id: data.orderId, }); break; case message: navigationRef.navigate(MessagePage); break; } }八、navigationRef关键因为推送是在“组件外触发”的import { createNavigationContainerRef } from react-navigation/native; export const navigationRef createNavigationContainerRef();NavigationContainer ref{navigationRef} {/* routes */} /NavigationContainer九、完整流程总结App 启动 → 请求权限获取 FCM token → 给后端后端发送 push带 dataApp 收到 → 用 Notifee 展示用户点击 → 解析 datanavigationRef 跳转页面十、常见坑很重要⚠️ iOS 不显示通知→ 没开权限 / 没配置 APNs⚠️ Android 收不到→ channel 没创建⚠️ 点击没跳转→ data 没传 or 没监听⚠️ 冷启动跳转失败→ 没用getInitialNotification十一、进阶建议你这个级别可以做你有前端 7 年经验可以直接做一层封装 NotificationService统一处理权限token收消息跳转 Router Mapconst ROUTE_MAP { order: OrderDetail, message: MessagePage, };