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

在 React Native（RN）中处理推送通知，一般分为三块：

1️⃣ 本地推送（Local Notification）
2️⃣ 远程推送（Push Notification / FCM / APNs）
3️⃣ 点击通知跳转页面（Deep Link / Navigation）

我给你按“工程实战”的方式讲，直接能落地。

一、常用方案选型

目前主流有两套：

✅ 方案1（推荐）

• Firebase（FCM 推送）

• react-native-firebase

• Notifee（处理本地通知 + 点击事件）

👉 优点：稳定、功能全、可控性强（企业项目首选）

方案2（简单但旧）

• react-native-push-notification

👉 不太推荐（维护一般）

二、基础架构（你要理解）

推送流程：

服务端 -> FCM/APNs -> 手机 -> RN App -> 展示通知 -> 用户点击 -> 跳转页面

关键点：

• 后台推送数据（data payload）

• App 收到后展示通知

• 点击通知时解析数据并导航

三、安装依赖（推荐方案）

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

四、远程推送（FCM）

1️⃣ 请求权限

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); });

五、本地通知（Notifee）

1️⃣ 创建通知

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️⃣ 创建 channel（Android 必须）

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 Navigation）

import { 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>

九、完整流程总结

1. App 启动 → 请求权限

2. 获取 FCM token → 给后端

3. 后端发送 push（带 data）

4. App 收到 → 用 Notifee 展示

5. 用户点击 → 解析 data

6. navigationRef 跳转页面

十、常见坑（很重要）

⚠️ iOS 不显示通知
→ 没开权限 / 没配置 APNs

⚠️ Android 收不到
→ channel 没创建

⚠️ 点击没跳转
→ data 没传 or 没监听

⚠️ 冷启动跳转失败
→ 没用getInitialNotification

十一、进阶建议（你这个级别可以做）

你有前端 7 年经验，可以直接做一层封装：

👉 NotificationService

• 统一处理：

  • 权限

  • token

  • 收消息

  • 跳转

👉 Router Map：

const ROUTE_MAP = { order: 'OrderDetail', message: 'MessagePage', };