Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Stack de navegaci贸n para Pokedex

4/17
Recursos

Aportes 25

Preguntas 9

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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: 鈥淔avoritos鈥. Ejemplo:

<Tab.Navigator>
            <Tab.Screen 
                name="Favorite"
                component={FavoriteScreen} 
                options={{
                    tabBarLabel:"Favoritos",
                    tabBarIcon: ({ color, size }) => <Icon name="heart" color={color} size={size} />,
                    headerTitle: "Favoritos"
                }}
            />
            <Tab.Screen 
                name="Pokedex"
                component={PokedexScreen}
                options={{
                    tabBarLabel:"",
                    tabBarIcon: () => renderPokeball(),
                    headerTitle: "Pokedexxx"
                }}
            />
            <Tab.Screen 
                name="Account"
                component={AccountScreen}
                options={{
                    tabBarLabel:"Mi cuenta",
                    tabBarIcon: ({ color, size }) => <Icon name="user" color={color} size={size} />,
                    headerTitle: "Mi cuenta"
                }}
            />
        </Tab.Navigator>```

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:

Navigation.js

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();

export default function Navigation() {
  return (
    <Tab.Navigator>
      <Tab.Screen
        name="Favoritex"
        component={FavoriteNavigation}
        options={{
          tabBarLabel: "Favoritrix",
          tabBarIcon: ({ color, size }) => (
            <Icon name="heart" color={color} size={size} />),
          headerTitle: "Favoritix",
          headerShown: false
           }}      />

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

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

function renderPokeball() {
  return(
    <Image
      source={require('../assets/pokeball.png')}
      style={{ width: 57, height: 57/* top: -1 */ }}
    />
  )
}

PokedexNavigation.js

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

const Stack = createNativeStackNavigator();

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

Pokemon.js

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


export default function Pokemon() {
  return (
    <View>
      <Text>Estas viendo un POKEMON</Text>
    </View>
  )
}

Cambi茅 algunos nombres para reconocer donde se aplica el cambio

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


headerTitleAlign: 'center'

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

si tienen problemas en que se les repide el Header con esto desactive para que aplique los cambios de createStackNavigator

import { SafeAreaView, View, Text } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";

const Favorite = () => {
  const navigation = useNavigation();

  useLayoutEffect(() => {
    navigation.setOptions({
      headerShown: false,
    });
  }, []);
  return (
    <SafeAreaView>
      <Text>Favorite</Text>
    </SafeAreaView>
  );
};

export default Favorite;

Les dejo una captura de mi Navigation.js

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

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: 鈥渃enter鈥, debajo del tabBarLabel: 鈥淔avoritos鈥 para alinear el titulo al centro:

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

Le puedes colorar tu titulo personalizado en el header asi, no es necesario hacer el FavoritesNavigation.js

      <Tab.Screen
        name="Favorites"
        component={FavoritesScreen}
        options={{
          headerTitle: "Favoritos",
          tabBarLabel: "Favoritos",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="staro" color={color} size={size} />
          ),
        }}
      />

En la version de navigation 6 te ahorras un monton de codigo, no necesitas nada de esto.

en options pones esto

title: "Favoritos",

Estaba teniendo una alerta 鈥淸react-native-gesture-handler] Seems like you鈥檙e using an old API with gesture components, check out new Gestures system!鈥 y se soluciona bajando la version de esa dependencia 鈥[email protected]

Stack Navigator es una gran herramienta que nos sirve para navegar entre nuestros Screens de una forma sencilla, se maneja por pilas donde cada pantalla se coloca en la parte superior de la pila!

En CLI, si quieren usar el hook de useSafeAreaInsets solo deben primero agregar el SafeAreaProvider a su archivo root

// App.tsx

//... mas imports
import {SafeAreaProvider} from 'react-native-safe-area-context';

function App() {
  return (
    <SafeAreaProvider> {/*aqui*/}
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

Y despues en su navigator atributes

// src/navigators/ButtonTabNavigator.tsx

//... mas imports y el createTabNav
import {useSafeAreaInsets} from 'react-native-safe-area-context';

export default function MyTabs() {
  const insets = useSafeAreaInsets(); // inicializa el hook

  return (
    <Tab.Navigator
      sceneContainerStyle={{
        paddingTop: insets.top, /* usa el valor del hook  */
      }}>
	{/* las screens, etc... */}

HACER EL CAMBIO DE NOMBRE EN EL XxxxNavigation para version 6 import React from "react"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import FavoriteScreen from "../screens/Favorite"; const Stack = createNativeStackNavigator(); export default function FavoriteNavigation() { return ( <Stack.Navigator> <Stack.Screen name="FavoriteY" component={FavoriteScreen} options={{ title: "Favoritos" }} /> </Stack.Navigator> ); }

HACER EL CAMBIO DE NOMBRE EN EL XxxxNavigation para version 6
import React from 鈥渞eact鈥;
import { createNativeStackNavigator } from 鈥淍react-navigation/native-stack鈥;
import FavoriteScreen from 鈥溾/screens/Favorite鈥;

const Stack = createNativeStackNavigator();

export default function FavoriteNavigation() {
return (
<Stack.Navigator>
<Stack.Screen
name="FavoriteY"
component={FavoriteScreen}
options={{ title: 鈥淔avoritos鈥 }}
/>
</Stack.Navigator>
);
}

HACER EL CAMBIO DE NOMBRE EN EL XxxxNavigation para version 6 import React from "react"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import FavoriteScreen from "../screens/Favorite"; const Stack = createNativeStackNavigator(); export default function FavoriteNavigation() { return ( <Stack.Navigator> <Stack.Screen name="FavoriteY" component={FavoriteScreen} options={{ title: "Favoritos" }} /> </Stack.Navigator> ); }

exelente

People remember install

yarn add @react-navigation/native

or 

npm install @react-navigation/native

Donde comienza la confusi贸n