React Navigation下App前台/关闭时推送通知的正确导航实现方式

嘿，我经常处理React Native里导航和推送的结合场景，给你个明确的建议：一定要用集中式处理方案，分散到每个页面订阅onNotification简直是给自己挖维护坑——页面挂载卸载会导致监听丢失，重复代码一堆，后期改需求要改N个页面，太麻烦了。

下面我给你一套完整的实现方案，涵盖App前台、后台、关闭状态下的通知跳转，基于React Navigation v6和react-native-fcm：

核心思路 #

在App的根组件（比如App.js）集中初始化FCM并监听所有通知事件，通过导航引用（navigationRef）直接调用导航方法，统一处理跳转逻辑，覆盖所有通知接收场景：

• App处于前台时收到通知
• App处于后台时点击通知打开
• App完全关闭时点击通知启动

完整示例代码 #

1. 根组件（App.js）实现 #

import React, { useEffect, useRef } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import FCM from 'react-native-fcm';

// 导入你的业务页面组件
import HomeScreen from './screens/HomeScreen';
import OrderDetailScreen from './screens/OrderDetailScreen';
import MessageScreen from './screens/MessageScreen';

const Stack = createStackNavigator();

function App() {
  // 创建导航引用，用于在非页面组件中调用导航方法
  const navigationRef = useRef();

  useEffect(() => {
    // 监听前台收到通知的事件
    const foregroundNotificationListener = FCM.onNotification((notification) => {
      handleNotificationJump(notification);
      // 通知FCM已处理完前台通知
      notification.finish('received');
    });

    // 监听后台点击通知打开App的事件
    const backgroundNotificationListener = FCM.onNotificationOpened((notification) => {
      handleNotificationJump(notification);
    });

    // 检查App启动时是否有未处理的通知（关闭状态下点击通知启动）
    FCM.getInitialNotification().then((notification) => {
      if (notification) {
        handleNotificationJump(notification);
      }
    });

    // 组件卸载时清理监听
    return () => {
      foregroundNotificationListener.remove();
      backgroundNotificationListener.remove();
    };
  }, []);

  // 统一处理通知跳转逻辑
  const handleNotificationJump = (notification) => {
    // 假设后台推送的通知payload中，data字段包含screen（目标页面）和params（跳转参数）
    const { screen, params } = notification?.data || {};
    if (!screen) return;

    // 根据目标页面执行跳转，支持嵌套导航（比如Tab+Stack的情况）
    switch (screen) {
      case 'OrderDetailScreen':
        navigationRef.current?.navigate('OrderDetailScreen', {
          orderId: params?.orderId,
          ...params
        });
        break;
      case 'MessageScreen':
        navigationRef.current?.navigate('MessageScreen');
        break;
      // 默认跳转首页
      default:
        navigationRef.current?.navigate('HomeScreen');
    }
  };

  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName="HomeScreen">
        <Stack.Screen name="HomeScreen" component={HomeScreen} />
        <Stack.Screen name="OrderDetailScreen" component={OrderDetailScreen} />
        <Stack.Screen name="MessageScreen" component={MessageScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

关键细节说明 #

1. 导航引用（navigationRef）：通过useRef创建导航实例引用，这样在根组件的监听函数中可以直接调用navigate方法，不需要依赖页面的navigation属性。
2. 覆盖所有通知场景：
   • onNotification：处理App前台收到的通知，此时可以选择显示弹窗并执行跳转
   • onNotificationOpened：处理App后台时用户点击通知打开App的场景
   • getInitialNotification：处理App完全关闭时用户点击通知启动App的场景
3. 统一跳转逻辑：handleNotificationJump函数根据通知payload中的screen字段决定跳转页面，同时支持传递参数，后续新增页面只需要修改这个函数即可，维护成本极低。

注意事项 #

• 确保后台推送的通知包含data字段，示例中假设data里有screen（目标页面名称）和params（跳转参数），需要和后端开发人员约定好格式。
• 如果你的导航结构是嵌套的（比如TabNavigator嵌套StackNavigator），跳转时需要调整格式，比如：

  // 跳转到Tab下的指定页面
  navigationRef.current?.navigate('MainTab', {
    screen: 'OrderDetailScreen',
    params: { orderId: params?.orderId }
  });
  

• iOS需要配置APNs权限，Android需要正确配置google-services.json，确保通知能正常接收。

内容的提问来源于stack exchange，提问作者Shekhar Kamble