React Navigation 7.x中在指定屏幕隐藏底部Tab栏

问题说明 #

使用@react-navigation/native和@react-navigation/bottom-tabs构建底部Tab栏，需实现：

• 隐藏eCard整个栈的底部Tab栏（已通过route.name === 'eCard'实现）
• 隐藏HomeScreenStack中PassionFilter页面的底部Tab栏（React Navigation 7.x无法直接捕获嵌套栈页面，当前方案无效）
  使用类组件开发。

可行解决方案 #

方案一：在目标页面中通过navigation.setOptions控制父Tab栏 #

在PassionFilter类组件中，利用navigation的getParent()方法获取Tab导航器实例，动态修改Tab栏显示状态。

修改PassionFilter组件代码：

import React, { Component } from 'react';
// 其他必要导入

class PassionFilter extends Component {
  componentDidMount() {
    // 获取父Tab导航器实例
    const tabNavigator = this.props.navigation.getParent();
    if (tabNavigator) {
      // 设置Tab栏隐藏
      tabNavigator.setOptions({
        tabBarStyle: { display: 'none' }
      });
    }
  }

  componentWillUnmount() {
    // 离开页面时恢复Tab栏显示
    const tabNavigator = this.props.navigation.getParent();
    if (tabNavigator) {
      tabNavigator.setOptions({
        tabBarStyle: { display: 'flex' }
      });
    }
  }

  render() {
    // 页面渲染内容
    return (
      // ...你的页面代码
    );
  }
}

export default PassionFilter;

方案二：在Tab导航器中通过useNavigationState获取嵌套栈路由 #

在BottomTabNavigator中，使用useNavigationState钩子获取嵌套栈的当前路由信息，判断是否需要隐藏Tab栏。

修改BottomTabNavigator组件代码：

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigationState } from '@react-navigation/native';
import {
  EcardScreenStack,
  HomeScreenStack,
  MyActivitiesScreenStack,
} from './StackNavigator';
import BottomTabBar from '../components/bottomTabBar/BottomTabBar';

const Tab = createBottomTabNavigator();

const BottomTabNavigator = () => {
  // 获取当前导航状态，用于判断嵌套栈页面
  const navigationState = useNavigationState(state => state);

  // 判断是否需要隐藏Tab栏：eCard栈 或 Home栈下的PassionFilter页面
  const shouldHideTabBar = () => {
    // 检查eCard栈的情况
    if (navigationState.routes.some(route => route.name === 'eCard')) {
      return true;
    }
    // 检查Home栈下的嵌套路由
    const homeRoute = navigationState.routes.find(route => route.name === 'Home');
    if (homeRoute?.state?.routes) {
      const currentHomeScreen = homeRoute.state.routes[homeRoute.state.index].name;
      return currentHomeScreen === 'PassionFilter';
    }
    return false;
  };

  return (
    <Tab.Navigator
      initialRouteName="Home"
      screenOptions={{
        tabBarStyle: shouldHideTabBar() ? { display: 'none' } : { display: 'flex' },
      }}
      tabBar={props => <BottomTabBar {...props} />}>
      <Tab.Screen
        name="Home"
        component={HomeScreenStack}
        options={{ headerShown: false }}
      />
      <Tab.Screen
        name="eCard"
        component={EcardScreenStack}
        options={{ headerShown: false }}
      />
      <Tab.Screen name="My Activities" component={MyActivitiesScreenStack} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;

原路由配置代码（整理后） #

Index组件 #

const Index = () => {
 return (
  <ErrorBoundary
    FallbackComponent={CustomFallBackComponent}
    onError={errorHandler}>
    <Provider store={store}>
      <Loader loading={false} />
      <Routes />
      <IFrameModal />
      <CustomToast store={store} />
     </Provider>
   </ErrorBoundary>
 );
};
export default Index;

Routes组件 #

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import { SplashScreenStack } from './StackNavigator';
import BottomTabNavigator from './TabNavigator';
import DrawerNavigator from './DrawerNavigator';

const Stack = createNativeStackNavigator();

export const Routes = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="SplashScreenStack"
        screenOptions={{ headerShown: false }}>
        <Stack.Screen
          name="SplashScreenStack"
          component={SplashScreenStack}
          options={{ gestureEnabled: false }}
        />
        <Stack.Screen
          name="BottomTabNavigator"
          component={BottomTabNavigator}
          options={{ gestureEnabled: false }}
        />
        <Stack.Screen
          name="DrawerNavigator"
          component={DrawerNavigator}
          options={{ gestureEnabled: false }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

StackNavigator组件 #

import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../screens/loginScreen/LoginScreen';
import MyActivityScreen from '../screens/myActivityScreen/MyActicityScreen';
import HomeScreen from '../screens/homeScreen/HomeScreen';
import SplashViewScreen from '../screens/splashScreen/SplashScreen';
import PassionCategory from '../screens/homeScreen/passionDeals/passionCategory/PassionCategory';
import PassionFilter from '../screens/homeScreen/passionDeals/passionFilter/PassionFilter';

const Stack = createNativeStackNavigator();

export const SplashScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="SplashScreen"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen name="SplashScreen" component={SplashViewScreen} />
    </Stack.Navigator>
  );
};

export const HomeScreenStack = ({ navigation }) => {
  return (
    <Stack.Navigator
      initialRouteName="HomeScreen"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen name="HomeScreen" component={HomeScreen} />
      <Stack.Screen name="PassionCategory" component={PassionCategory} />
      <Stack.Screen name="PassionFilter" component={PassionFilter} />
    </Stack.Navigator>
  );
};

export const EcardScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="LoginScreen"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen name="LoginScreen" component={LoginScreen} />
    </Stack.Navigator>
  );
};

export const MyActivitiesScreenStack = () => {
  return (
    <Stack.Navigator
      initialRouteName="MyActivity"
      screenOptions={{ headerShown: false }}>
      <Stack.Screen name="MyActivity" component={MyActivityScreen} />
    </Stack.Navigator>
  );
};

DrawerNavigator组件 #

import React from 'react';
import { createDrawerNavigator } from '@react-navigation/drawer';
import BottomTabNavigator from './TabNavigator';
import DrawerScreen from '../screens/drawer/Drawer';

const Drawer = createDrawerNavigator();

const DrawerNavigator = () => {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerShown: false,
        swipeEdgeWidth: 0.2,
        drawerType: 'front',
        swipeEnabled: true,
        overlayColor: '#292929',
      }}
      drawerContent={props => <DrawerScreen {...props} />}>
      <Drawer.Screen name="BottomTabNavigator" component={BottomTabNavigator} />
    </Drawer.Navigator>
  );
};

export default DrawerNavigator;

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