javascript - 如何在 react 导航 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.x.x
你只需要添加

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

or

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

它会隐藏标题