Si usan Android y les aparece el header del Tab y el de Stack lo pueden quitar con esa opción en el Tab.Navigator No se si solo a mi me paso por usar ReactNative CLI.
screenOptions={{headerShown:false}}
Es porque tienes la ultima version de react navigation (6), mientras que el profe esta en la 5
CAMBIOS
Me paso lo mismo que tu porque tengo la ultima version de react navigation, agregue esa linea pero no toma el nombre “title” que se configura en options, entonces la forma de solucionarlo es agregando "headerTitle: "Favoritos" en el tab.screen de Navigation.js.
Para la versión 6 de react-navigation no es necesario crear un componente de Navigation para cada sección con el fin de cambiar el título. En el mismo Navigation.js se puede pasar como opción headerTitle: "Favoritos". Ejemplo:
Muchas gracias, excelente aporte, ayudo a resolver el problema del nombre tanto en el header del Tab como en el de Stack.
Claro, al usar el Stack dentro del Navigation.js se te creaban dos Headers con el titulo. Como hiciste para creat el stack dentro de la Pokedex para que tmbn puedas ir a la Ruta del Pokemon?
Realmente es una pena que dejen pasar tanto tiempo para actualizar los cursos, como dijo un compañero, en la versión 6 de Tab Navegation, ya no es necesario todo lo que hace en los primeros 7 min!
Les dejo como quedaría el stack para ver los pokemones con la v6.x de Stack Navigation para navegar entre los pokemones que tengas:
tengo la version 0.71 de react, el y el stack navigation no fue necesario hacerlo en el android, no estoy seguro como es en ios, esto es porque ya estaba el stack hecho, lo que hice fue agregar esta linea headerTitleAlign: "center", debajo del tabBarLabel: "Favoritos" para alinear el titulo al centro:
Hola Compañeros, ( al 25/03/22) ya que se ha actualizado navigate a la versión 6, por si llegan a tener alguna dificultad les ire dejando el código que vaya trabajando en el siguiente repositorio:
https://github.com/onedrako/react-native-pokedex-platzi
Éxito en sus desarrollos
Hoy en dia no es necesario crear cada Navigation para cada screen, automaticamente al crear el screen en el archivo Navigation nos coloca el header con el nombre de la pantalla.
Solo necesitamos crear el PokedexNavigation para manejar distintas pantallas que se relacionen con el mismo componente.
En la version 6 el Header del encabezado ya viene por defecto, para poder quitarlo hay que agregar en options headerShown: false en el Navigation.js
par los que no les reconoce el createStackNavigator
hay que instalar esto.
yarn add @react-navigation/stack
Actualicen para la v6.x que hay varios cambios y da problemas generar stack navigation con nuevos componentes
cuando agrego la navegación me sale este mensaje
Found screens with the same name nested inside one another. Check:
Account, Account > Account
Que debo hacer ?
Te esta diciendo que tienes screens con el mismo nombre anidados dentro de otro.
al ingresar
rnf + tab
ya no me entrega la función automática.
Alguien sabría como volver a activarla ?????
Yo teneia el mismo inconveniente pero lo solucione agregando otra extension de react parecida a la que dijo que instalemos al principio del curso anterior a este
ES7+ React/Redux/React-Native snippets
no estoy seguro si mas adelantes utilizaremos el stack navigation.. la version mas reciente me permite personalizar el header con el parametro 'header title'
No se si mas adelante vamos a utilizar el stack navigation, pero con una version mas reciente podemos resolver la personalizacion del header con 'headerTitle' desde el componente Tab.Navigation
Para junio de 2025, con la versión actual de React Native ya no hace falta crear un Stack Navigator, basta con configurar el archivo _layout.tsx (en mi caso por ser Typesript), dentro de la carpeta (tabs), así:
import{FontAwesome}from'@expo/vector-icons';import{Tabs}from'expo-router';import{Image}from'react-native';const pokeImage:string='../../assets/images/pokeball.png';exportdefaultfunctionTabLayout(){return(<Tabs><Tabs.Screen name='index'// estas options quitan a index del tab navigator options={{ href:null,}}// estas options quitan a index del tab navigator y ayuda a redireccionar redirect={true}/><Tabs.Screen name='favourites' options={{ title:'Favourites',tabBarIcon:({ color, size })=>(<FontAwesome name='heart' color={color} size={size}/>),}}/><Tabs.Screen name='pokedex' options={{ title:'',tabBarIcon:()=>RenderImage(),}}/><Tabs.Screen name='account' options={{ title:'Account',tabBarIcon:({ color, size })=>(<FontAwesome name='user' color={color} size={size}/>),}}/></Tabs>);}constRenderImage=()=>{return(// require solo acepta rutas estáticas<Image source={require(pokeImage)} style={{ width:65, height:67, top:-21}}/>);};
