No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Vista y navegaci贸n al detalle del Pokemon

12/17
Recursos

Aportes 11

Preguntas 1

Ordenar por:

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

Para navegar entre paginas usamos el siguiente Hook

import { useNavigation } from '@react-navigation/native';

Hacemos una instancia del mismo

const navigation = useNavigation(); 

Lo usamos para navegar entre paginas
Puede recibir dos parametros, el primero el Screen donde queremos ir y el otro los
Parametros que le queremos pasar en un objeto de configuracion que es route.params.

navigation.navigate('Pokemon', { id: pokemon.id });

Podr铆amos utilizar JSON para pasar el objeto y evitar otra llamada de API pero no se si lo recomiendan para este caso. Por ejemplo:

Convertir el objeto en JSON

navigation.navigate('Pokemon', { pokemon: JSON.stringify(pokemon)});

Convertir el JSON en un objeto de JS

JSON.parse(props.route.params.pokemon)

Si hay alguien aqui usando typescript, es necesario indicar los tipos correctos para que no aparezcan errores en el editor:

  1. Primero indicamos los tipos para los par谩metros de nuestras pantalla principales en nuestra navegaci贸n (en este caso de stack):

    // src/navigation/Pokedexnavigation.tsx
    
    import React from 'react';
    import { createNativeStackNavigator } from '@react-navigation/native-stack';
    
    import Pokedex from '../screens/Pokedex';
    import Pokemon from '../screens/Pokemon';
    
    // tipando los parametros de cada pantalla principal
    export type PokedexStackParamList = {
      Pokedex: undefined;
      Pokemon: {
        id: string;
      };
    };
    
    // podemos mandar este tipado a la funcion createStackNavigator (buena practica)
    const Stack = createNativeStackNavigator<PokedexStackParamList>();
    
    export default function PokedexNavigation() {
      return (...);
    }
    
  2. Luego obtenemos el tipado para el useNavigation, usando el tipado de antes y el gen茅rico NativeStackNavigationProp:

    // src/components/PokemonCard.tsx
    
    import { FC } from 'react';
    import { Image, StyleSheet, Text, TouchableWithoutFeedback, View } from 'react-native';
    import { useNavigation } from '@react-navigation/native';
    import { capitalize } from 'lodash';
    import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
    
    import { getColorByPokemonType } from '../utils/getColorByPokemonType';
    import type { PokedexStackParamList } from '../navigation/PokedexNavigation';
    
    type PokemonCardProps = {
      pokemon: any;
    };
    
    const PokemonCard: FC<PokemonCardProps> = ({ pokemon }) => {
      const navigation = useNavigation<NativeStackNavigationProp<PokedexStackParamList>>();
    
      const goToPokemon = () => {
        navigation.navigate('Pokemon', { id: pokemon.id });
      };
    
      ...
    
      return (...);
    };
    
    ...
    
    export default PokemonCard;
    

Yo prefer铆 tener un solo archivo de navegaci贸n

#src/navigation/Navigation.js

import React from "react"
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Icon from "react-native-vector-icons/FontAwesome5"
import Pokedex from "../screens/Pokedex"
import Favorites from "../screens/Favorites"
import Account from "../screens/Account"
import { Image } from "react-native"
import Pokemon from "../screens/Pokemon"

export default function Navigation() {
  const Tab = createBottomTabNavigator()
  const PokemonStack = createNativeStackNavigator();

  const StackPokemon = () => {
    return (<PokemonStack.Navigator>
      <PokemonStack.Screen name="Pokedex" component={Pokedex} options={{ title: "Pokemones", headerTransparent: false }} />
      <PokemonStack.Screen name="Pokemon" component={Pokemon} />
    </PokemonStack.Navigator>
    )
  }

  return (

    <Tab.Navigator>

      <Tab.Screen name="Favorites" component={Favorites} options={{
        tabBarLabel: "Favoritos",
        headerTitle: "Favoritos",
        tabBarIcon: ({ color, size }) => <Icon name="heart" color={color} size={size} />
      }} />
      <Tab.Screen name="StackPokemon" component={StackPokemon} options={{
        tabBarLabel: "",
        headerShown: false,
        tabBarIcon: () => renderImage()
      }} />
      <Tab.Screen name="Account" component={Account} options={{
        tabBarLabel: "Mi cuenta",
        headerTitle: "Mi cuenta",

        tabBarIcon: ({ color, size }) => <Icon name="user" color={color} size={size} />
      }} />

    </Tab.Navigator>

  );
}

function renderImage() {
  return (
    <Image source={require('../assets/pokeball.png')}
      style={{ width: 65, height: 65, top: -15 }}
    />
  )
}

Estoy usando la version de react-navigation 鈥淾6.1.6鈥

"@react-navigation/native": "^6.1.6"

En esta version si que puedo enviar todo el objeto con la data del Pokemon

navigation.navigate("Pokemon", { pokemon });

Y la forma en que la recupero es la siguiente:

const { pokemon } = route.params;

a alguien mas se le demora mucho tiempo en renderizar los otros 20 elementos en la aplicacion?

驴Est谩n perdidos algunos videos? Hay varios que no encuentro y se dificulta comprender algo con la informaci贸n incompleta :/
A la fecha que estoy escribiendo esto. Noviembre 2023 le pase todo el objeto y no hubo problema pasando todo el objeto pokemon. Estoy usando la version 6

Se me genera este error

Si utilizas react-query y configuras el cach茅, a煤n haciendo la petici贸n http se usar谩 la cache y no se har谩 la peticion de no ser necesario.

Bueno en caso tal de que solo se pueda mandar texto plano en el navigate, creo que algo que se podemos hacer es enviar el objeto como un string (JSON.stringify) y luego parsearlo (JSON.parse)