React Native：如何仅隐藏内层Stack指定页面的Drawer导航头部

要实现仅隐藏嵌套Stack中指定页面的Drawer导航头部，可通过以下两种方式实现：

方法一：在Drawer.Screen中动态判断路由设置Header #

直接在Drawer的main屏幕配置中，根据嵌套Stack的当前路由动态控制Drawer头部的显示：

<NavigationContainer>
  <Drawer.Navigator initialRouteName="Home">
    <Drawer.Screen 
      name="main" 
      component={MyStack} 
      options={({ navigation }) => {
        // 获取嵌套Stack的当前激活路由
        const drawerRoute = navigation.getState().routes.find(route => route.name === 'main');
        const currentStackScreen = drawerRoute?.state?.routes[drawerRoute.state.index]?.name;
        
        return {
          // 仅当当前Stack页面为MainScreen时隐藏Drawer头部
          header: currentStackScreen === 'MainScreen' ? () => null : undefined,
          headerTitleAlign: "right"
        };
      }} 
    />
    <Drawer.Screen name="track" component={ProgressTrackerScreen} />
    <Drawer.Screen name="reminder" component={DailyReminderScreen} />
    <Drawer.Screen name="bookmarks" component={BookmarksScreen} />
  </Drawer.Navigator>
</NavigationContainer>

同时调整Stack导航配置，移除全局的header: () => null（若不需要Stack自身头部，可单独为对应页面设置）：

<Stack.Navigator initialRouteName="MainScreen" screenOptions={{
  headerTitleAlign: "right"
}}>
  <Stack.Screen name="MainScreen" component={MainScreen} options={{ title: 'Main' }} />
  <Stack.Screen name="page" component={Page} />
</Stack.Navigator>

方法二：在目标页面中通过父导航修改Header #

在MainScreen组件内，获取Drawer导航实例，在页面挂载/卸载时动态设置Drawer头部的显示状态：

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

function MainScreen() {
  const navigation = useNavigation();
  // 获取Drawer导航的父实例
  const drawerNavigation = navigation.dangerouslyGetParent();

  useEffect(() => {
    // 页面挂载时隐藏Drawer头部
    drawerNavigation.setOptions({ header: () => null });

    // 页面卸载时恢复Drawer头部
    return () => {
      drawerNavigation.setOptions({ header: undefined });
    };
  }, [drawerNavigation]);

  return (
    // 你的页面内容
  );
}

这种方式更灵活，适合需要根据页面内状态动态控制头部的场景。

内容的提问来源于stack exchange，提问作者M.KH