如何在反应导航 5.x 中隐藏选项卡导航（底部选项卡）的标题？答案

【问题标题】：How to hide the header from Tab navigation (bottom-tabs) in react navigation 5.x?如何在反应导航 5.x 中隐藏选项卡导航（底部选项卡）的标题？
【发布时间】：2020-09-10 07:39:42
【问题描述】：

我正在尝试使用 createBottomTabNavigator 函数来创建底部导航选项卡，我想隐藏标题，如下截图：

我在代码下方的 stackNavigator 中有一个 BottomTabNavigator：
这是rooter配置文件rooter.js

import React, { Component } from 'react';
import WelcomeScreen from '../component/WelcomeScreen';
import Login from '../component/login/Login';
import Register from '../component/register/Register';
import RegisterTwo from '../component/register/RegisterTwo';
import TabsBottom from '../component/tabs/TabsNavigation'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

  const Stack = createStackNavigator();
  const AppSwitchNavigator = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator  initialRouteName="WelcomeScreen">
          <Stack.Screen name="TabsBottom" component={TabsBottom} />
          <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
          <Stack.Screen name="Register" component={Register} />
          <Stack.Screen name="RegisterTwo" component={RegisterTwo} />
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  export const AppContainer = AppSwitchNavigator;

这是我的嵌套导航器 TabsNavigation.js

import React, { Component } from 'react';
import Explore from '../Explore';
import Settings from '../Settings';
import Profile from '../Profile';
import Search from '../Search';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome5';
import colors from '../../../styles/colors/index';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;
        if (route.name === 'Explore') {
          iconName = focused ? 'home': 'home';
          color = focused ? colors.mainColor : colors.gray03;
        } else if (route.name === 'Settings') {
          iconName = focused ? 'cog' : 'cog';
          color = focused ? colors.mainColor : colors.gray03;
        }
        else if (route.name === 'Search') {
          iconName = focused ? 'search' : 'search';
          color = focused ? colors.mainColor : colors.gray03;
        }
        else if (route.name === 'Profile') {
          iconName = focused ? 'user-alt' : 'user-alt';
          color = focused ? colors.mainColor : colors.gray03;
        }
        return <Icon name={iconName} size={30} color={color} />;
      }    
    })}
    tabBarOptions={{
      activeTintColor: colors.mainColor,
      inactiveTintColor: colors.gray03
    }}
    >
      <Tab.Screen name="Explore" component={Explore} />
      <Tab.Screen name="Search" component={Search} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Settings" component={Settings} />
    </Tab.Navigator>
  );
}
export default function TabsBottom() {
  return (
      <MyTabs />  
  );
}

我想删除屏幕的headres
感谢您的帮助

【问题讨论】：

标签： javascript android reactjs react-native react-redux

【解决方案1】：

从版本 6.x.x

你只需要添加

<Tab.Navigator screenOptions={{ headerShown: false }}> 

or

<HomeStack.Navigator screenOptions={{ headerShown: false }}>

它会隐藏标题

【讨论】：

【解决方案2】：

使用以下行。将headerShown 写为false。它将删除标题：

<Stack.Screen name="TabsBottom" options={{headerShown: false}} component={TabsBottom} />

【讨论】：

【解决方案3】：

对于 React Native 中的最新版本：

如果要删除所有底部选项卡的标题，请使用以下提示：

<TabNavigator.Navigator screenOptions={{headerShown:false}}/>

或者，如果您想为特定的 bottomTabScreen 删除它，请使用：

<TabNavigator.Screen name="home" component={HomeStack} />

【讨论】：

【解决方案4】：

要隐藏“Tabs Bottom”标题，您必须向 TabsBottom Stack.Screen 组件添加一个 headerShown: false 选项，如下所示：

  const Stack = createStackNavigator();
  const AppSwitchNavigator = () => {
    return (
      <NavigationContainer>
        <Stack.Navigator  initialRouteName="WelcomeScreen">
          <Stack.Screen name="TabsBottom" component={TabsBottom} options={{ headerShown: false }} />
          <Stack.Screen name="WelcomeScreen" component={WelcomeScreen} />
          <Stack.Screen name="Register" component={Register} />
          <Stack.Screen name="RegisterTwo" component={RegisterTwo} />
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }

  export const AppContainer = AppSwitchNavigator;

【讨论】：

【解决方案5】：

在 bottomtab.js 文件中使用此语法

【讨论】：

【解决方案6】：

我不太擅长 react-native 的东西，但 documentation about hiding tab bar 说，在嵌套导航器（文档中 stackNavigator 内的 tabNavigator）中，您必须将屏幕放在父导航器中，这是有道理的，因为每个导航器都处理自己的屏幕。

如果我指的是你的屏幕，你有一个 stackNavigator 和一个 tabNavigator，所以只要应用这个原则。如果您仍然需要帮助，请提供一个复制品（欢迎参加 Snack expo，或者将您的完整代码粘贴到您的问题中），以便我们进行处理。

【讨论】：

感谢您的响应，我想要从 tabNavigation 屏幕中删除标题，请参阅屏幕截图
@fullstackdeveloper 你的 tabNavigator 需要在你的 stackNavigator 之上。这样，对于由 tabNavigator 处理的路由，stackNavigator 标头将不会出现。

【解决方案7】：

(React Nav ver6.x) 在“”中添加此代码片段“options={{headerShown: false}}”。它将删除您添加到的每个选项卡的标题。

【讨论】：