React Native FCM：通知点击跳转指定页的事件注册优化问题

我之前也碰到过类似的嵌套导航下FCM通知跳转的问题，把监听逻辑放在App.js里确实是最合理的方案——既不用在每个页面重复注册，又能保证所有状态下的通知都能被正确处理。下面一步步给你讲清楚怎么实现：

步骤1：获取导航器的全局引用 #

因为要在App.js里直接调用导航跳转，我们需要先拿到导航容器的引用。如果用的是React Navigation 6+，可以用useNavigationContainerRef来创建这个全局引用：

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

function App() {
  // 创建导航全局引用
  const navigationRef = useNavigationContainerRef();

  // 后续FCM监听逻辑会用到这个ref
  // ...
}

如果是React Navigation 5或更早版本，用全局ref对象的方式：

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';

// 全局导航ref
export const navigationRef = React.createRef();

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      {/* 导航结构 */}
    </NavigationContainer>
  );
}

步骤2：在App.js中注册FCM监听事件 #

我们需要处理两种通知场景：App前台收到通知、App后台/关闭时点击通知打开App。把这两个监听都放在App.js的useEffect里，确保App启动后就生效：

import FCM from 'react-native-fcm';
import { useEffect } from 'react';

function App() {
  const navigationRef = useNavigationContainerRef();

  useEffect(() => {
    // 处理App前台收到的通知
    const foregroundNotificationListener = FCM.onNotification((notification) => {
      // 假设你的通知payload里有targetScreen字段，指定要跳转的页面
      if (notification.targetScreen) {
        // 确保导航容器已初始化完成
        if (navigationRef.isReady()) {
          navigationRef.navigate(notification.targetScreen, {
            // 传递页面需要的参数，比如从notification里取itemId
            itemId: notification.itemId
          });
        }
      }
    });

    // 处理App后台/关闭状态下，点击通知打开App的场景
    const openedNotificationListener = FCM.onNotificationOpened((notification) => {
      if (notification.targetScreen) {
        // 刚启动App时导航可能还没准备好，加个小延迟确保能跳转成功
        setTimeout(() => {
          if (navigationRef.isReady()) {
            navigationRef.navigate(notification.targetScreen, {
              itemId: notification.itemId
            });
          }
        }, 500);
      }
    });

    // 组件卸载时移除监听（App.js一般不会卸载，但这是好习惯）
    return () => {
      foregroundNotificationListener.remove();
      openedNotificationListener.remove();
    };
  }, [navigationRef]);

  // 渲染你的嵌套导航结构
  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={DrawerNavigator} />
        <Stack.Screen name="DetailScreen" component={DetailScreen} />
        {/* 其他需要跳转的页面 */}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// 你的Drawer导航组件
function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="HomeDrawer" component={HomeScreen} />
      {/* 其他Drawer页面 */}
    </Drawer.Navigator>
  );
}

关键注意事项 #

1. 和后端约定payload字段：一定要让后端在通知payload里带上targetScreen（或者你自定义的字段），用来指定要跳转的页面路由名称，必要时带上页面所需的参数。
2. 检查导航就绪状态：调用navigate前必须用navigationRef.isReady()判断，尤其是App刚启动的场景，避免导航容器还没初始化就执行跳转。
3. 监听的清理：虽然App.js几乎不会被卸载，但还是要在useEffect的返回函数里移除监听，避免潜在的内存泄漏。

为什么之前在Home页注册不行？ #

当App处于前台时，如果你跳转到其他页面，Home页组件会被卸载，它注册的FCM监听也会跟着失效，所以此时收到通知就触发不了跳转逻辑。而App.js作为应用的根组件，只要App在运行就会一直挂载，监听会持续生效，完美解决这个问题。

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