Configuraci贸n de React Navigation

2/17
Recursos

Aportes 20

Preguntas 7

Ordenar por:

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

o inicia sesi贸n.

Si est谩n probando con Android el SafeAreaView no funciona correctamente.
Lo solucion茅 instalando:
expo install react-native-safe-area-context

y luego import谩ndolo:
import { SafeAreaView } from 鈥渞eact-native-safe-area-context鈥;

Voy con la versi贸n 6 los importadores cambian, por si alg煤n loco como yo desea hacerlo (Lo estoy haciendo con Typescript)

import { createNativeStackNavigator } from 鈥淍react-navigation/native-stack鈥;

yarn add @react-navigation/native

expo install react-native-screens react-native-safe-area-context

yarn add @react-navigation/native-stack

yarn add @react-navigation/bottom-tabs

yarn add react-native-vector-icons

yarn start

Mejore la forma de implementar los Tabs, unificando en un componente llamado TabScreen pasandole por prop el nombre de titulo de cada Tab y no tener 3 componentes que la unica diferencia es el nombre, 鉂わ笍 si les gust贸 mi aporte

yarn add react-native-vector-icons
npm i react-native-vector-icons

La documentaci贸n est谩 espectacular! Te gu铆a muy bien para crear botones con estilo

Use la versi贸n 6, todo funciona bien y estable. Creo que 9 meses despu茅s es mejor ya utilizar la versi贸n mas actualizada.

Tienen que actualizar los cursos con la version x6 , porfavor.

No es por nada pero, lo haces ser sencillo!

SafeAreaView no me hizo falta al estar usando Android ya que se alineaba solo鈥 a tener en cuenta " Actualmente solo es aplicable a dispositivos iOS con iOS versi贸n 11 o posterior" es lo que dice la Documentacion Oficial . Aclaro para las pruebas uso mi dispositivo Android, por eso me resultaba curioso que se aplicara esto solo.

@AugustinNavarro en el examen aparece una pregunta referente sobre un DrawerNavigation y en ninguno de los videos del curso que escuche con plena atencion y segu铆 de izquierda a derecha lo mencionas, podrias quitar esa pregunta o explicar a que hace referencia el DrawerNavigation

En esta ocasi贸n les comento: realice la instalaci贸n con la versi贸n 6, estoy utilizando npm, ya que al instalar el yarn en forma global, me genero dificultades, no se me presento dificultad con el SafeAreaView, como no soy ingenieor de sistemas, me logre asesorar del ingeniero Andres Rojas, el cual me da mucho soprte t茅cnico. Finalmente al terminar de instalar todos los paquetes, aplique npx expo-doctor, para que corrigiera algunos conflictos. y tambi茅n me apoyo en ChatGPT (el curso de platzi es bueno), version 2021

Dos puntos:

  • Si gustan tambien pueden usar la desestructuraci贸n, en vez de utilizar el variable Tab, solo abre llaves { Screen, Navigator } = createNativeStackNavigator().

  • si instalaste con create-expo-app, puede usar los icons instalados por defecto de expo. https://docs.expo.dev/guides/icons/ - https://icons.expo.fyi/

Reciclando la app anterior

Incre铆ble que en la documentaci贸n claramente dice que ya esta deprecado el navigation 5.x y no lo haya hecho con la versi贸n 6 que claramente debe tener muchos updates鈥

me encanta este curso

Me voy por la versi贸n 6.

para poder usar el cel, desde la aplicacion de expo es necesario crear el proyecto con la version 6 de react navigataion para no tener ningun problema: https://reactnavigation.org/docs/getting-started/

Me encanta.