如何移除BottomTabNavigator中的指定页面底部标签？

问题根源 #

你当前的代码存在两个核心问题：

1. CreateAccessForm的tabBarButton配置语法不完整，箭头函数未返回任何值
2. MaterialBottomTabNavigator并不支持tabBarVisible配置项，该属性仅适用于普通的BottomTabNavigator

快速修复方案 #

直接修正CreateAccessForm的options配置，确保tabBarButton返回null，同时移除无效的tabBarVisible属性：

<Tab.Screen
  name="createAccessForm"
  component={CreateAccessForm}
  options={{
    tabBarButton: () => null, // 返回null即可完全隐藏该tab按钮
  }}
/>

完整修正后的代码 #

import React from 'react';
import Home from '../pages/Home';
import Access from '../pages/Acessos/Index';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import CreateAccessForm from '../pages/Acessos/form';

import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

import MaterialIcon from 'react-native-vector-icons/MaterialIcons';

const Tab = createMaterialBottomTabNavigator();

export default function AppRoutes() {
  return (
    <Tab.Navigator
      tabBarActiveTintColor="red"
      activeColor="#50cfc9"
      barStyle={{backgroundColor: '#0c222b'}}
      screenOptions={{
        tabBarHideOnKeyboard: true,
        tabBarShowLabel: false,
        tabBarActiveTintColor: 'red',
      }}>
      <Tab.Screen
        name="createAccessForm"
        component={CreateAccessForm}
        options={{
          tabBarButton: () => null,
        }}
      />
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarIcon: ({color, size, focused}) => {
            return (
              <MaterialIcon
                focused={focused}
                name="home"
                color={!focused ? '#234655' : '#50cfc9'}
                size={20}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name="Access"
        component={Access}
        options={{
          tabBarIcon: ({color, size, focused}) => {
            return (
              <MaterialIcon
                color={!focused ? '#234655' : '#50cfc9'}
                name="add-circle"
                size={20}
              />
            );
          },
        }}
      />
    </Tab.Navigator>
  );
}

更合理的导航结构优化 #

如果CreateAccessForm仅需通过按钮跳转访问，建议将Tab导航嵌套在Stack导航中，把表单页面作为Stack的独立路由，彻底脱离Tab栏的路由列表：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

export default function AppRoutes() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      {/* Tab导航作为Stack的一个页面 */}
      <Stack.Screen name="TabNavigator" component={TabNavigator} />
      {/* 独立的表单页面，仅通过跳转访问 */}
      <Stack.Screen name="createAccessForm" component={CreateAccessForm} />
    </Stack.Navigator>
  );
}

// 单独定义Tab导航组件
function TabNavigator() {
  return (
    <Tab.Navigator
      tabBarActiveTintColor="red"
      activeColor="#50cfc9"
      barStyle={{backgroundColor: '#0c222b'}}
      screenOptions={{
        tabBarHideOnKeyboard: true,
        tabBarShowLabel: false,
        tabBarActiveTintColor: 'red',
      }}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarIcon: ({color, size, focused}) => {
            return (
              <MaterialIcon
                focused={focused}
                name="home"
                color={!focused ? '#234655' : '#50cfc9'}
                size={20}
              />
            );
          },
        }}
      />
      <Tab.Screen
        name="Access"
        component={Access}
        options={{
          tabBarIcon: ({color, size, focused}) => {
            return (
              <MaterialIcon
                color={!focused ? '#234655' : '#50cfc9'}
                name="add-circle"
                size={20}
              />
            );
          },
        }}
      />
    </Tab.Navigator>
  );
}

这种结构下，你可以通过navigation.navigate('createAccessForm')在任意页面跳转至表单，完全无需担心Tab栏的干扰。

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