No tienes acceso a esta clase

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

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

3D
6H
9M
1S

Vista y navegaci贸n al detalle del Pokemon

12/17
Recursos

Aportes 9

Preguntas 1

Ordenar por:

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

o inicia sesi贸n.

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;
    

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;

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

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

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.

Se me genera este error

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)