Expo React Native推送通知点击导航报错：navigation未定义

核心问题分析 #

• 导航组件HomeNavigator接收的navigation是父级导航实例，并非当前Stack Navigator的可用实例，且推送通知触发时组件可能未处于活跃状态，导致navigation未定义。
• navigation.navigate通常需要在Stack Screen组件内部使用，直接在导航器组件中调用会出现上下文匹配问题。

解决方案：使用全局导航引用（navigationRef） #

1. 创建全局导航引用文件 #

新建navigationRef.js，用于全局管理导航实例：

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

export const navigationRef = createNavigationContainerRef();

export function navigate(name, params) {
  // 确保导航容器已初始化完成
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

2. 关联导航引用到根容器 #

在根App组件中，将navigationRef绑定到NavigationContainer：

import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './navigationRef';
import HomeNavigator from './HomeNavigator';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      <HomeNavigator />
    </NavigationContainer>
  );
}

3. 修改导航器中的通知监听逻辑 #

更新HomeNavigator，移除不必要的navigation props，改用全局导航方法跳转：

const Stack = createStackNavigator();
import { navigate } from './navigationRef';

const HomeNavigator = () => {

  const notificationListen = (notification)=>{
    const {type} = notification?.request?.content?.data ?? {};
    console.log('notification listen type', type);
  }

  const responseListen = (notification)=>{
    console.log('responseListen', notification);
    // 修正数据路径（根据实际推送数据结构调整）
    const {type} = notification?.notification?.request?.content?.data ?? {};
    console.log('notification response type', type);
    
    if (type === 'order') {
      // 使用全局导航方法跳转，注意页面名称与Stack.Screen的name完全一致
      navigate('Welcome');
    }
  }

  useNotifications(notificationListen, responseListen);

  return(
    <Stack.Navigator>
      <Stack.Screen name="Welcome" component={WelcomeScreen}/>   
      <Stack.Screen name="Home" component={HomeScreen}/>
    </Stack.Navigator>
  )
}

export default HomeNavigator;

额外注意事项 #

• 页面名称一致性：确保跳转的页面名称与Stack.Screen的name完全匹配（原代码中的Welcoome拼写错误，需修正为Welcome）。
• 推送数据验证：调试时打印完整的notification对象，确认data字段的路径是否正确，避免因数据路径错误导致type无法获取。
• 导航容器初始化：navigate方法中加入isReady()判断，避免在导航容器未初始化完成时调用跳转方法。

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