Vista y navegación al detalle del Pokemon

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

Contenido del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:02

Vista y navegación al detalle del Pokemon

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

Clase 12 de 17

Clase 12 / 17

Cristian Iñiguez

Hace 5 años

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

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

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;

Víctor Daniel Cardozo Fernández

Hace 3 años

Muchas gracias por tu aporte !!! Justo me faltaba el paquete de @react-navigation/native-stack y ya con eso pude arreglar el resto de errores de Typescript :D

Vladimir Farrera Vera

Hace 3 años

buen aporte pero tu

type PokemonCardProps = {
  pokemon: any;
};

Lo podrias cambiar por un

export interface TiposDatosPokemon{
  id: string,
  name:string,
  type: string,
  order : number,
  imagen:string,
}

yo lo cree en el pokedex donde llamamos los datos de la API y lo exporto para que no tengas que usar any

Comentarios (15)15 comentarios

Luis Alejandro Nieto Ruth

Luis Fernando Pedroza Taborda

Christian Michael Rosales

Jaime La Rosa

Darío Condori Humerez

Hace 4 años

Matías Daniel Cravero

Ernesto Vladimir Perez Ramos

Juan Manuel Orjuela

Sergio Camilo Castillo Nuñez

Jorge Rodrigo Massón Reynoso

Agustín Navarro Galdon

Profesor

r2d2bt Barajas Tirado

David Rangel

Hace un año

Ricardo Andres Ardila Enriquez

Hace 2 años

Ismael Eliezer López Castrejón

Wilmer David Cedeño Mendoza

Deyvid Antonio Arauz Cruz

Daniel Rodríguez

Kenet Andrés Chungandro Montenegro

Jhunior Eduardo Guevara Lázaro

Juan Riquelme

Inicializando la app

Creación del proyecto: PokeDex

Configuración de React Navigation

Diseñando la Tab navigation con iconos

Stack de navegación para Pokedex

API y listado de Pokemon

Consumo de APIs con fetch: PokeApi

Información de todos los Pokemon

Lista de Pokemon con FlatList

Renderizando la PokemonCard

Clasificación por colores y utilidades de Lodash

Infinite scrolling con FlatList

Añadiendo StyleSheet a la lista

Detalles del Pokemon

Vista y navegación al detalle del Pokemon

Consultando la API de detalles del Pokemon

Maquetación del Pokemon: header

Maquetación del Pokemon: sección de tipos

Maquetación del Pokemon: estadísticas

Maquetación del Pokemon: barra de navegación

Vista y navegación al detalle del Pokemon

Progreso del curso

Inicializando la app

API y listado de Pokemon

Detalles del Pokemon