Intenté de muchas maneras, creo que el problema se puede resolver en este Código TabNavigator.js de TabNavigator.js: -
import { NavigationContainer } from '@react-navigation/native'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import Icon from 'react-native-vector-icons/Ionicons'; //Screens import Home from '../screens/Home'; import Doctor from '../screens/Doctor'; import Restaurant from '../screens/Restaurants'; import Property from '../screens/Property'; //Screen Names 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})=>({ 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> ); }En la parte superior del texto de la pantalla de inicio hay una barra de Inicio "nombrada" que quiero eliminar
Depende de cuál sea su versión de navegación reactiva.
A partir de la versión 6.xx
Si desea ocultar el encabezado en todas las pantallas de pestañas inferiores, solo necesita agregar
<Tab.Navigator screenOptions={{ headerShown: false }}>en tu caso:
<Tab.Navigator initialRouteName={homeName} screenOptions={{ headerShown: false }, ({route})=>({ 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>o puede ocultarlo para una pantalla específica
<Stack.Screen name = {homeName} component = {Home} options={{headerShown: false}} />