React Navigation：如何在指定嵌套路由页面隐藏底部TabBar

针对你遇到的FeedRoutes下Comments页面无法隐藏底部TabBar的问题，以下是两种可行方案：

方案一：在TabNavigator中动态判断路由（推荐） #

这种方法将TabBar的显示逻辑集中在TabRoutes中，维护更方便：

1. 首先导入getFocusedRouteNameFromRoute工具函数，用于获取嵌套路由的当前活跃页面：

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

2. 修改TabRoutes里Navigator的screenOptions为动态函数，根据当前聚焦的路由控制TabBar显示：

export function TabRoutes({ navigation }: any) {
  const { Navigator, Screen } = createBottomTabNavigator();
  const theme = useTheme();

  return (
    <Navigator
      initialRouteName="FeedRt"
      screenOptions={({ route }) => {
        // 获取FeedRt嵌套路由里的当前页面名称，默认值设为FeedRt
        const focusedRouteName = getFocusedRouteNameFromRoute(route) ?? 'FeedRt';
        
        return {
          headerShown: false,
          tabBarActiveTintColor: theme.colors.primary,
          tabBarStyle: {
            backgroundColor: theme.colors.tabBarBackground,
            position: 'absolute',
            borderTopRightRadius: 16,
            borderTopLeftRadius: 16,
            borderColor: '#9E9E9E',
            borderWidth: RFValue(0.5),
            borderStyle: 'solid',
            bottom: -10,
            height: 90,
            paddingHorizontal: 16,
            // 当当前页面是Comments时隐藏TabBar，否则正常显示
            display: focusedRouteName === 'Comments' ? 'none' : 'flex',
          },
        };
      }}
    >
      {/* 原有Screen组件内容保持不变 */}
    </Navigator>
  );
}

方案二：在Comments组件中动态修改TabBar样式 #

如果需要在页面级别控制，可以在Comments组件中通过navigation.setOptions修改父级TabBar的样式：

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

export function Comments() {
  const navigation = useNavigation();
  const theme = useTheme();

  useEffect(() => {
    // 进入页面时隐藏TabBar
    navigation.setOptions({
      tabBarStyle: { display: 'none' },
    });

    // 离开页面时恢复TabBar原有样式
    return () => {
      navigation.setOptions({
        tabBarStyle: {
          backgroundColor: theme.colors.tabBarBackground,
          position: 'absolute',
          borderTopRightRadius: 16,
          borderTopLeftRadius: 16,
          borderColor: '#9E9E9E',
          borderWidth: RFValue(0.5),
          borderStyle: 'solid',
          bottom: -10,
          height: 90,
          paddingHorizontal: 16,
        },
      });
    };
  }, [navigation, theme]);

  // 组件其余业务代码
  return (
    {/* Comments页面内容 */}
  );
}

为什么之前的display:none无效？ #

因为Comments是FeedRoutes（StackNavigator）的子页面，而TabBar属于上层的TabNavigator，直接在Comments页面设置样式无法穿透到父级的TabBar容器，必须通过React Navigation提供的路由配置或API来动态修改父级TabBar的显示状态。

内容的提问来源于stack exchange，提问作者Nilton Schumacher F