iOS Expo推送App杀死状态下点击通知跳转指定页面解决方案

• 技术栈：iOS端应用、Expo推送通知、react-navigation v6、Expo SDK44
• 故障现象：App完全杀死状态下推送可正常携带全量数据送达，但用户点击通知触发指定页跳转时，抛出navigationRef is null报错
• 前置现状：未单独实现无导航属性跳转所需的独立RootNavigator结构
• 已验证方案：
  • 方案1：将所有推送通知监听逻辑写入NavigationContainer的onReady回调，可正常实现跳转，但耦合性高存在偶发失效风险
  • 方案2：组件内定义isReady状态，通过NavigationContainer的onReady回调更新状态触发重渲染，在useEffect中监听状态变化执行跳转逻辑，完全无效
• 目标：实现App杀死状态下用户点击推送通知后稳定跳转至指定页面

核心思路：通过全局导航操作队列解决冷启动场景下「通知点击事件触发早于导航实例挂载」的时序差问题，不需要重构现有路由结构。

1. 抽离全局导航工具 #

新建导航工具文件，统一处理ref引用、跳转暂存逻辑，避免空指针：

// src/utils/rootNavigation.js
import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef();
// 待执行导航操作队列，缓存导航未就绪时的所有跳转请求
const pendingNavActions = [];

/**
 * 全局跳转方法
 * @param {string} routeName 目标路由名
 * @param {object} params 路由参数
 */
export function rootNavigate(routeName, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(routeName, params);
    return;
  }
  // 导航未就绪时将操作存入队列
  pendingNavActions.push({ routeName, params });
}

/**
 * 导航挂载完成后批量执行积压的跳转操作
 */
export function flushPendingNavActions() {
  if (!navigationRef.isReady()) return;
  while (pendingNavActions.length) {
    const action = pendingNavActions.shift();
    navigationRef.navigate(action.routeName, action.params);
  }
}

2. 根组件绑定导航容器 #

在App根组件中绑定导航ref，在容器就绪回调中只做积压操作的执行，不耦合推送逻辑：

// App.js
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef, flushPendingNavActions } from './src/utils/rootNavigation';
// 引入路由栈配置、推送初始化逻辑
import RootStack from './src/routes/RootStack';
import initPushNotification from './src/utils/push';
import { useEffect } from 'react';

export default function App() {
  useEffect(() => {
    // 应用启动时直接初始化推送监听，不要等导航就绪再注册
    initPushNotification();
  }, []);

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        flushPendingNavActions();
      }}
    >
      <RootStack />
    </NavigationContainer>
  );
}

3. 实现推送监听逻辑 #

单独抽离推送初始化方法，全场景覆盖冷启动、后台、前台的通知点击事件，所有跳转统一走封装的全局跳转方法：

// src/utils/push.js
import * as Notifications from 'expo-notifications';
import { rootNavigate } from './rootNavigation';

export default async function initPushNotification() {
  // 先完成通知权限申请，避免权限弹窗阻断初始化流程
  const { status } = await Notifications.getPermissionsAsync();
  if (status !== 'granted') {
    await Notifications.requestPermissionsAsync();
  }

  // 处理冷启动场景：App完全杀死时，用户点击通知启动应用
  const initialNotification = await Notifications.getInitialNotificationAsync();
  if (initialNotification) {
    const { targetRoute, routeParams } = initialNotification.request.content.data;
    // 此时导航大概率未就绪，跳转操作会自动存入队列
    rootNavigate(targetRoute, routeParams);
  }

  // 处理前后台场景：App在前台/后台挂起未杀死时，用户点击通知
  Notifications.addNotificationResponseReceivedListener((response) => {
    const { targetRoute, routeParams } = response.notification.request.content.data;
    rootNavigate(targetRoute, routeParams);
  });
}

• 第一种把监听全写在onReady里的方案能生效，是因为回调触发时导航ref已经完成挂载，但存在时序风险：如果getInitialNotificationAsync的异步返回晚于onReady触发时机，就会出现偶发拿不到冷启动通知数据、跳转失效的问题，且逻辑耦合不利于维护
• 第二种isReady状态驱动useEffect的方案无效，核心原因有两个：一是冷启动时getInitialNotificationAsync是一次性异步接口，等状态更新触发useEffect执行时，初始通知的上下文已经被释放，拿不到跳转参数；二是状态更新到ref实际完成绑定存在渲染时间差，依然会出现ref为空的报错
• 本方案不需要额外创建独立RootNavigator组件，兼容现有路由配置，通过队列抹平了所有时序差问题，不会出现空指针，也不会丢失跳转请求

适配提示：Expo SDK44版本iOS端需要注意，不要在通知监听回调里做过重的同步操作，避免阻塞JS线程导致跳转延迟。

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