Estoy usando el navegador React Native Tab y estoy tratando de tener mis nombres de ruta de pantalla como encabezado, pero sin suerte. El hecho de que las pantallas se representen dentro del Navegador de pestañas hace que sus encabezados sean ignorados. He intentado configurar headerShown=true y muchas otras cosas sin suerte.

Esto es parte de mi código App.js :

 const AppStack = createStackNavigator({ Navigation: { screen: NavigationScreen, navigationOptions: { } }, Route: { screen: RouteScreen, navigationOptions: { // headerShown: false headerTitle: 'TestTitle' } }, Confirm: { screen: ConfirmScreen, navigationOptions: { // headerShown: false headerTitle: 'TestTitle' } }, Find: { screen: FindScreen, navigationOptions: { // headerShown: false headerTitle: 'TestTitle' } }, Offer: { screen: OfferScreen, navigationOptions: { // headerShown: false headerTitle: 'TestTitle' } },

y aquí está mi código Navigation Screen :

 export default function NavigationScreen( {navigation}) { return ( <NavigationContainer> <Tab.Navigator screenOptions={({ route }) => ({ tabBarIcon: ({ color, size }) => { const icons = { Home: 'home', Profile: 'account', Offer: 'car-hatchback', Find: 'magnify' }; return ( <MaterialCommunityIcons name={icons[route.name]} color='#E9446A' size={30} /> ); }, })} > <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Profile" component={HomeTabScreen} /> <Tab.Screen name="My Rides" children={()=><MyRidesScreen navigation={navigation}/>} /> <Tab.Screen name="Offer" children={()=><OfferScreen navigation={navigation}/>} /> <Tab.Screen name="Find" children={()=><FindScreen navigation={navigation}/>} /> </Tab.Navigator> </NavigationContainer> ); }

Cualquier cambio intentado en las rutas de Tab.Screen a través de las opciones se representa en la pestaña inferior Nombres y no en el encabezado de la pantalla, ya que la pantalla principal siempre es la Navigation Screen