STACK NAVIGATOR (NAVEGADOR DE PILA)
Stack Navigator es la forma más sencilla y común para implementar la navegación en una aplicación móvil, tan solo se requiere la instalación de la utilidad @react-navigation/native que nos va a permitir crear la estructura de la navegación a través del componente NavigationContainer, y de la utilidad @react-navigation/stack, que nos va a permitir gestionar la navegación a través del componente createStackNavigator.
En el video explico paso a paso cómo llegar al resultado final y las consideraciones que se tomaron en cuenta para comenzar de manera correcta este proyecto.
REFORZAMIENTO
Para verificar el entendimiento que tuvimos sobre el tema, hay que colocar un botón más para regresar a una pantalla anterior. Lo único que tenemos que hacer es en cada una de las pantallas utilizar una vez más el componente <Boton/>, enviar el parámetro action con navigation.goBack() y un text que diga “Regresar”.
Puedes practicar este ejercicio aquí.
Creación de navegabilidad con Stack Navigator en React Native – ver proyecto completo
Si no has dado con la solución, no te preocupes, revisa el siguiente código y trata de comprenderlo. Como de Desarrollador de Aplicaciones Móviles con React Native también tienes que aprender a leer códigos y saberlos interpretar, toma este ejercicio para reforzar esta parte que también es muy importante, es otra forma de aprender.
Creación de navegabilidad con Stack Navigator en React Native – modificación de atributos – ver proyecto completo
DIFERENCIA ENTRE @REACT-NAVIGATION/STACK Y @REACT-NAVIGATION/NATIVE-STACK
Hemos visto la utilidad @react-navigation/stack de React Navigation, pero que hay de @react-navigation/native-stack. La implementación de ambas utilidades y su uso son demasiado similares, la diferencia que hay entre ellas se refiere a las características que cada una nos ofrece. Por ejemplo, Native Stack ofrece una navegación y rendimiento nativo pero es muy poco personalizable, y si lo queremos personalizar tendremos que hacerlo para cada sistema operativo (Android e IOS).
En cuanto a la utilidad Stack, que fue con la que trabajamos, si bien no es una navegación nativa, si trata de asemejarla y además es altamente personalizable, podemos generar animaciones y transiciones entre pantallas, modificar la apariencia de los encabezados de navegación, entre otros atributos que podemos ver en su descripción en la página oficial de React Navigation.
Usemos enfoques nativos cuando sea necesario y tengamos un poco más de experiencia.