Cursos Empresas Blog Live Conf Eventos Precios

0:009:14

Stack de navegación para Pokedex

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 4 / 17

Ver clases

Stack de navegación para Pokedex

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 4 de 17

Clase 4 / 17

Stack de navegación para Pokedex

Curso de React Native: Manejo de Listas y Consumo de APIs

Clase 4 / 17

Ver clases

José Gregorio Estrada Meneses

Hace 5 años

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import FavoriteScreen from "../screens/Favorite";

const Stack = createStackNavigator();

export default function FavoriteNavigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen
        name="Favorite"
        component={FavoriteScreen}
        options={{
          title: "Favoritos"
        }}
      />
    </Stack.Navigator>
  );
}

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import PokedexScreen from "../screens/Pokedex";
import PokemonScreen from "../screens/Pokemon";

const Stack = createStackNavigator();

export default function PokedexNavigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen name="Pokemon" component={PokemonScreen} />
      <Stack.Screen name="Pokedex" component={PokedexScreen} />
    </Stack.Navigator>
  );
}

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import AccountScreen from "../screens/Account";

const Stack = createStackNavigator();

export default function AccountNavigation() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerShown: false
      }}
    >
      <Stack.Screen
        name="Account"
        component={AccountScreen}
        options={{title: "Mi cuenta" }}
      />
    </Stack.Navigator>
  );
}

import React from "react";
import { View, Text } from "react-native";

export default function Pokemon() {
  return (
    <View>
      <Text>Estamos en un POKEMON</Text>
    </View>
  );
}

import React from "react";
import { Image } from "react-native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Icon from "react-native-vector-icons/FontAwesome5";
import FavoriteNavigation from "./FavoriteNavigation";
import PokedexNavigation from "./PokedexNavigation";
import AccountNavigation from "./AccountNavigation";

const Tab = createBottomTabNavigator();

function renderPokeball() {
  return (
    <Image
      source={require("../assets/pokeball.png")}
      style={{ width: 75, height: 75, top: -15 }}
    />
  );
}

export default function Navigation() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Favorite"
        component={FavoriteNavigation}
        options={{
          tabBarLabel: "Favoritos",
          tabBarIcon: ({ color, size }) => (
            <Icon name="heart" color={color} size={size} />
          ),
        }}
      />

      <Tab.Screen
        name="Pokedex"
        component={PokedexNavigation}
        options={{
          tabBarLabel: "",
          tabBarIcon: () => renderPokeball(),
        }}
      />

      <Tab.Screen
        name="Account"
        component={AccountNavigation}
        options={{
          tabBarLabel: "Mi cuenta",
          tabBarIcon: ({ color, size }) => (
            <Icon name="user" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

Comentarios (41)41 comentarios

Miguel Hernández

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 }}

Camilo José Mezú Mina

Es porque tienes la ultima version de react navigation (6), mientras que el profe esta en la 5 CAMBIOS

Luis Fernando Pedroza Taborda

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.

Wilfred Vásquez

Muchas gracias, excelente aporte, ayudo a resolver el problema del nombre tanto en el header del Tab como en el de Stack.

Adriel Gomez

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?

Matías Daniel Cravero

Hace 4 años

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!

Gera Garcia

Franklin Reyes

Muchas Gracias! solo cambiar el createStackNavigator por createNativeStackNavigator y todo funcionó perfecto.

Norge Santana Gonzalez

Si estas en Android y quieres que el titulo del header este centrado usa este codigo en options tambien


headerTitleAlign: 'center'

Cid Emmanuel Esquivel González

Hace 3 años

Gustavo Pú

Matias Ozuna Baez

Heroe!!

Fabian Grajales

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:

tabBarLabel: "Favoritos",
headerTitleAlign: "center",

Michael Nassee Buritica Ortega

Muchas gracias me funciono

Kenet Andrés Chungandro Montenegro

Les dejo una captura de mi Navigation.js

Gabriel Hernández Valdez

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

Reynaldo Francisco Moreno Briceño

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.

Leibniz Moreno

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

Francisco Espinel

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 ?

José Fabián Beltrán Meza

Te esta diciendo que tienes screens con el mismo nombre anidados dentro de otro.

Daniel Soto Erices

al ingresar

rnf + tab

ya no me entrega la función automática. Alguien sabría como volver a activarla ?????

JOSE CATAGUA

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

Julio Santacruz

Hace 2 años

no estoy seguro si mas adelantes utilizaremos el stack navigation.. la version mas reciente me permite personalizar el header con el parametro 'header title'

<Tab.Navigator > <Tab.Screen name="Favorite" component={Favorite} options={{ headerTitle:'Favoritos', tabBarLabel: "Favoritos", tabBarIcon: ({ color, size }) => ( <Icon name="heart" color={color} size={size} /> ), }} /> <Tab.Screen name="Pokedex" component={Pokedex} options={{ tabBarLabel: "", tabBarIcon: () => PokeIcon(), }} /> <Tab.Screen name="Account" component={Account} options={{ tabBarLabel: "Mi Perfil", tabBarIcon: ({ color, size }) => ( <Icon name="user" color={color} size={size} /> ), }} /> </Tab.Navigator>

David Rangel

Hace un año

Stack de navegación para Pokedex

Stack de navegación para Pokedex

Stack de navegación para Pokedex

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Stack de navegación para Pokedex

Stack de navegación para Pokedex

Comentarios

Comentarios