React Native CLI：隐藏底部Tab导航内栈页面的Drawer头部

你当前的代码里，Drawer导航器设置了全局自定义头部HeaderMenu，而AddPatient Stack中的headerShown: false仅能隐藏Stack自身的头部，无法影响Drawer层级的头部，因此需要针对Drawer的头部做动态控制。

方案一：在Drawer导航器中全局处理 #

通过navigation.getState()获取路由栈层级信息，判断当前是否处于表单页面，动态决定是否渲染Drawer头部：

<Drawer.Navigator
  screenOptions={({ navigation }) => {
    const rootState = navigation.getState();
    // 获取Tab导航器的状态
    const tabNavigatorState = rootState.routes[rootState.index].state;
    if (!tabNavigatorState) return { header: () => <HeaderMenu /> };

    const currentTab = tabNavigatorState.routes[tabNavigatorState.index].name;
    // 判断是否在AddPatient Tab下
    if (currentTab === 'AddPatient') {
      const stackState = tabNavigatorState.routes[tabNavigatorState.index].state;
      const currentStackRoute = stackState.routes[stackState.index].name;
      // 表单页面隐藏Drawer头部
      if (['Step1', 'Step2'].includes(currentStackRoute)) {
        return { header: () => null };
      }
    }
    // 其他页面显示自定义头部
    return { header: () => <HeaderMenu /> };
  }}
  drawerContent={props => <CustomDrawerContent {...props} />}>
  <Drawer.Screen name="BottomTabNavigator" component={BottomTabNavigator} />
</Drawer.Navigator>

方案二：在表单页面中单独控制 #

在Step1、Step2组件内，通过navigation.getParent()获取Drawer导航器实例，挂载时隐藏头部，卸载时恢复：

// Step1组件示例
import { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

function Step1() {
  const navigation = useNavigation();

  useEffect(() => {
    const drawerNav = navigation.getParent();
    if (drawerNav) {
      // 隐藏Drawer头部
      drawerNav.setOptions({ header: () => null });
    }

    // 页面卸载时恢复头部
    return () => {
      if (drawerNav) {
        drawerNav.setOptions({ header: () => <HeaderMenu /> });
      }
    };
  }, [navigation]);

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

选择建议 #

• 若所有表单页面都需要隐藏Drawer头部，方案一更高效，无需修改每个页面组件；
• 若仅个别页面需要隐藏，方案二更灵活，针对性更强。

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