React Native：识别抽屉导航内栈导航的活跃屏幕

我来帮你搞定这个需求～当抽屉导航里嵌套了栈导航时，要获取当前活跃的屏幕，核心是要从栈导航的状态里提取当前显示的路由名称，下面给你几种实用的方法：

方法一：使用useNavigationState钩子（函数组件推荐） #

这个钩子可以直接获取整个导航树的状态，我们只需要找到栈导航对应的路由，再提取它的当前活跃项：

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

// 在你的抽屉内容组件中定义这个函数
const getCurrentActiveStackRoute = () => {
  // 获取全局导航状态
  const navState = useNavigationState(state => state);
  
  // 找到抽屉里的栈导航路由（这里假设你的栈导航在抽屉里的名称是'stackNav'）
  const stackRoute = navState.routes.find(route => route.name === 'stackNav');
  
  if (stackRoute?.state) {
    // 栈导航的当前活跃路由是其state中index对应的route
    return stackRoute.state.routes[stackRoute.state.index].name;
  }
  
  // 默认返回栈的初始路由，也就是你定义的'homeComponent'
  return 'homeComponent';
};

// 然后在抽屉项里判断是否为活跃状态
const currentActiveRoute = getCurrentActiveStackRoute();

// 示例：抽屉项的focused属性
<DrawerItem
  label="首页"
  focused={currentActiveRoute === 'homeComponent'}
  onPress={() => /* 跳转逻辑 */}
/>

方法二：通过navigation prop获取状态 #

如果是在类组件里，或者不想用钩子，可以通过navigation.dangerouslyGetState()来获取导航状态：

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

const DrawerContent = () => {
  const navigation = useNavigation();
  const navState = navigation.dangerouslyGetState();
  
  const stackRoute = navState.routes.find(route => route.name === 'stackNav');
  const currentRouteName = stackRoute?.state?.routes[stackRoute.state.index].name || 'homeComponent';
  
  return (
    // 用currentRouteName来标记活跃项
    <DrawerItemList>
      <DrawerItem
        label="服务页面"
        focused={currentRouteName === 'serviceScreen'}
        onPress={() => navigation.navigate('stackNav', { screen: 'serviceScreen' })}
      />
    </DrawerItemList>
  );
};

方法三：自定义导航事件监听（更灵活） #

如果需要更精准的控制，比如每个栈屏幕切换时主动通知抽屉，可以通过自定义事件来实现：

1. 在栈的每个屏幕中发送事件：

import { useNavigation, useEffect } from '@react-navigation/native';

const ServiceScreen = () => {
  const navigation = useNavigation();
  
  useEffect(() => {
    // 向抽屉导航（父导航）发送自定义事件，告知当前路由名称
    navigation.getParent()?.dispatch({
      type: 'UPDATE_ACTIVE_ROUTE',
      payload: 'serviceScreen',
    });
  }, [navigation]);
  
  // ...屏幕其他逻辑
};

2. 在抽屉内容组件中监听这个事件：

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

const CustomDrawerContent = () => {
  const navigationRef = useNavigationContainerRef();
  const [activeRoute, setActiveRoute] = useState('homeComponent');
  
  useEffect(() => {
    // 监听自定义事件，更新活跃路由
    const unsubscribe = navigationRef.addListener('UPDATE_ACTIVE_ROUTE', (event) => {
      setActiveRoute(event.payload);
    });
    
    // 组件卸载时取消监听
    return unsubscribe;
  }, [navigationRef]);
  
  return (
    <DrawerItemList>
      <DrawerItem
        label="服务详情"
        focused={activeRoute === 'serviceDetailScreen'}
        onPress={() => navigation.navigate('stackNav', { screen: 'serviceDetailScreen' })}
      />
      {/* 其他抽屉项同理 */}
    </DrawerItemList>
  );
};

注意事项 #

• 确保你在抽屉导航中定义的栈路由名称和代码里的一致（比如你的栈叫stackNav，要对应上）
• 如果栈导航还有更深的嵌套，可能需要递归获取当前路由，但你的示例是单层栈，上面的方法完全适用

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