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 10

Preguntas 5

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta 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>```

Actualicen para la v6.x que hay varios cambios y da problemas generar stack navigation con nuevos componentes

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

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

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

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!

People remember install

yarn add @react-navigation/native

or 

npm install @react-navigation/native

Donde comienza la confusi贸n