RN Firebase Messaging+React Navigation退出状态下DeepLinking失效

问题核心 #

App完全退出（用户划走关闭）时，通知点击事件的触发时机早于React Navigation实例的初始化完成，导致跳转逻辑无法执行；而后台状态下导航实例已就绪，所以跳转正常。

具体修复步骤 #

1. 暂存通知跳转数据 #

在App启动入口处，通过getInitialNotification()获取退出状态下点击通知携带的路由数据，将其存入本地存储（比如AsyncStorage），等待导航初始化完成后再处理。

示例代码：

// App.js 或启动入口文件
import messaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-async-storage/async-storage';

const App = () => {
  useEffect(() => {
    const fetchInitialNotification = async () => {
      const initialNotify = await messaging().getInitialNotification();
      if (initialNotify?.data) {
        // 存储待处理的导航数据
        await AsyncStorage.setItem(
          'pendingNav',
          JSON.stringify(initialNotify.data)
        );
      }
    };
    fetchInitialNotification();
  }, []);

  // ... 其他启动逻辑
};

2. 导航就绪后执行跳转 #

在导航容器初始化完成后，读取本地存储的待跳转数据，调用导航实例完成跳转，之后清空存储避免重复触发。

示例代码：

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';

const AppNavigator = () => {
  const navRef = useNavigationContainerRef();
  const [navReady, setNavReady] = useState(false);

  useEffect(() => {
    const handlePendingNav = async () => {
      const pendingData = await AsyncStorage.getItem('pendingNav');
      if (pendingData && navRef.isReady()) {
        const { routeName, params } = JSON.parse(pendingData);
        // 执行跳转
        navRef.navigate(routeName, params);
        // 清空缓存
        await AsyncStorage.removeItem('pendingNav');
      }
      setNavReady(true);
    };
    handlePendingNav();
  }, [navRef]);

  if (!navReady) return null; // 或自定义加载组件

  return (
    <NavigationContainer ref={navRef}>
      {/* 你的导航栈/抽屉配置 */}
    </NavigationContainer>
  );
};

3. 确保通知Payload携带正确路由信息 #

发送推送时，必须在data字段中明确目标路由名称和参数，示例Payload：

{
  "to": "用户FCM_TOKEN",
  "data": {
    "routeName": "OrderDetail",
    "params": {
      "orderId": "OD123456"
    }
  },
  "notification": {
    "title": "订单状态更新",
    "body": "点击查看详情"
  }
}

4. Android平台额外配置 #

检查AndroidManifest.xml中主Activity的配置，确保launchMode为singleTop，并添加对应的Intent Filter：

<activity
  android:name=".MainActivity"
  android:launchMode="singleTop">
  <intent-filter>
    <action android:name="com.yourpackage.OPEN_NOTIFICATION" />
    <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
</activity>

关键注意事项 #

• 必须等待navRef.isReady()返回true后再执行跳转，否则会因导航实例未初始化报错。
• 不要在getInitialNotification()回调中直接调用navigation.navigate()，此时导航容器还未挂载。
• iOS平台需确认已开启推送权限，且AppDelegate中通知回调逻辑正常（RN Firebase通常会自动配置，可检查是否有遗漏）。

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