如何移除Bottom Tab Navigator中Home页顶部的标题栏

要去掉页面顶部显示对应页面名称的默认标题栏，直接在Tab.Navigator的screenOptions配置中加入headerShown: false即可，该配置会全局关闭当前Tab导航下所有页面的默认顶部导航头。

修改完成后的完整TabNavigator.js代码：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
// 引入页面组件
import Home from '../screens/Home';
import Doctor from '../screens/Doctor';
import Restaurant from '../screens/Restaurants';
import Property from '../screens/Property';

// 页面路由名称常量
const homeName = 'Home';
const DoctorName = 'Doctor';
const RestaurantName = 'Restaurant';
const PropertyName = 'Property';

const Tab = createBottomTabNavigator();

export default function TabNavigator(){
    return(
        <NavigationContainer>
            <Tab.Navigator
            initialRouteName={homeName}
            screenOptions={({route})=>({
                // 关闭默认顶部标题栏
                headerShown: false,
                tabBarIcon:({focused,color,size})=>{
                     let iconName;
                     let rn = route.name;

                     if(rn === homeName){
                         iconName = focused ? 'home':'home-outline';
                     }else if (rn === PropertyName){
                         iconName = focused ? 'business':'business-outline';
                     }else if (rn ===RestaurantName){
                         iconName = focused ? 'restaurant':'restaurant-outline';
                     } else if (rn ===  DoctorName){
                         iconName = focused ? 'medkit':'medkit-outline';
                     }

                     return <Icon name = {iconName} size = {size} color = {color}/>
                },
            })}>
                <Tab.Screen  name = {homeName} component = {Home}/>
                <Tab.Screen  name = {DoctorName} component = {Doctor}/>
                <Tab.Screen  name = {RestaurantName} component = {Restaurant}/>
                <Tab.Screen  name = {PropertyName} component = {Property}/>
                              
            </Tab.Navigator>
        </NavigationContainer>
    );
}

其他可选配置 #

• 如果不需要全局隐藏所有Tab页的标题栏，仅需移除Home页的顶部栏，不需要在全局screenOptions中添加配置，单独给Home对应的Tab.Screen设置属性即可：

  <Tab.Screen name={homeName} component={Home} options={{headerShown: false}}/>
  

• 保存代码后重新加载应用，顶部显示“Home”的标题栏就会消失。

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