React Native中仅隐藏底部Tab内Profile栈的Drawer导航头部

方案一：通过Drawer页面的动态Options判断当前Tab #

利用Drawer Navigator中"Ana Sayfa"页面的options属性，结合Bottom Tab的路由状态动态控制Drawer头部显示。当当前活跃Tab为ProfileStack时隐藏头部，其余情况正常显示。

Drawer Navigator 配置 #

import { createDrawerNavigator } from '@react-navigation/drawer';
import Main from './Main';

const Drawer = createDrawerNavigator();

export default function DrawerNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen
        name="Ana Sayfa"
        component={Main}
        options={({ route }) => {
          // 获取Bottom Tab当前激活的路由名称
          const activeTab = route.state?.routes[route.state.index]?.name;
          // 仅当当前不是ProfileStack时显示Drawer头部
          return { headerShown: activeTab !== 'ProfileStack' };
        }}
      />
      {/* 其他Drawer页面 */}
    </Drawer.Navigator>
  );
}

Bottom Tab Navigator 配置（Main组件） #

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeStack from './HomeStack';
import CategoriesStack from './CategoriesStack';
import CartStack from './CartStack';
import DiscoverStack from './DiscoverStack';
import ProfileStack from './ProfileStack';

const Tab = createBottomTabNavigator();

export default function Main() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="HomeStack" component={HomeStack} />
      <Tab.Screen name="CategoriesStack" component={CategoriesStack} />
      <Tab.Screen name="CartStack" component={CartStack} />
      <Tab.Screen name="DiscoverStack" component={DiscoverStack} />
      <Tab.Screen name="ProfileStack" component={ProfileStack} />
    </Tab.Navigator>
  );
}

方案二：在ProfileStack中监听焦点状态控制Drawer头部 #

通过useNavigation获取Drawer导航器实例，在ProfileStack根页面监听焦点事件，进入时隐藏头部，离开时恢复显示。

ProfileStack 配置 #

import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import ProfileScreen from './ProfileScreen';
import React from 'react';

const Stack = createStackNavigator();

export default function ProfileStack() {
  const navigation = useNavigation();
  // 获取Drawer导航器实例（若Drawer有自定义id，替换为对应id）
  const drawerNav = navigation.getParent('Drawer');

  useFocusEffect(
    React.useCallback(() => {
      // 进入ProfileStack时隐藏Drawer头部
      drawerNav.setOptions({ headerShown: false });

      // 离开时恢复头部显示
      return () => {
        drawerNav.setOptions({ headerShown: true });
      };
    }, [drawerNav])
  );

  return (
    <Stack.Navigator>
      <Stack.Screen name="Profile" component={ProfileScreen} />
      {/* ProfileStack的其他子页面 */}
    </Stack.Navigator>
  );
}

注意事项 #

• 方案一中需注意route.state初始加载时可能为undefined，使用可选链操作符?.避免报错。
• 方案二中若Drawer Navigator设置了自定义id，需将getParent('Drawer')中的名称替换为对应的id，例如<Drawer.Navigator id="MainDrawer">则使用getParent('MainDrawer')。

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