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

Question

我正在尝试使用 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 />  
  );
}

我想删除屏幕的标题
谢谢你的帮助

Answer 1

从版本 6.xx 开始

你只需要添加

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

or

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

它会隐藏标题

Answer 2

对于 React Native 的最新版本：

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

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

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

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

Answer 3

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

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

Answer 4

我不太擅长反应本机的东西，但有关隐藏选项卡栏的文档 说，在嵌套导航器（文档中 stackNavigator 内的 tabNavigator）中，您必须将屏幕放在父导航器中，这是有意义的，因为每个导航器处理自己的屏幕。

如果我参考你的屏幕，你有一个 stackNavigator 和一个 tabNavigator，所以只需应用这个原则。如果您仍然需要帮助，请提供重现（我们将不胜感激，或者将您的完整代码粘贴到您的问题中），以便我们进行处理。