En este ejemplo, explicaremos cómo se puede regresar a páginas anteriores en la navegación de React Native utilizando las herramientas que proporciona la biblioteca @react-navigation/native. Analizaremos dos métodos importantes: goBack() y StackActions.popToTop().

Entendiendo el ejemplo

El componente SettingsScreen incluye dos botones que permiten realizar diferentes acciones de navegación hacia páginas previas en la pila de navegación:

1. Botón “regresar”: Utiliza el método goBack() para volver a la página inmediatamente anterior.
2. Botón “Home”: Utiliza StackActions.popToTop() para regresar directamente a la página raíz (la primera página en la pila de navegación).

Desglose del código

El método goBack()

<PrimaryButton
  onPress={() => navigator.goBack()}
  text="regresar"
/>

• Qué hace:
  Este método retrocede a la pantalla inmediatamente anterior en la pila de navegación. Si no hay pantallas en la pila (es decir, si ya estás en la pantalla raíz), no hará nada.

• Cuándo usarlo:
  Úsalo cuando quieras permitir al usuario regresar de manera secuencial por la pila de navegación, tal como un botón de “volver” estándar en aplicaciones móviles.

El método StackActions.popToTop()

<PrimaryButton
  onPress={() => navigator.dispatch(StackActions.popToTop())}
  text="Home"
/>

• Qué hace:
  Este método elimina todas las pantallas de la pila de navegación, excepto la primera (generalmente la pantalla raíz). Como resultado, lleva al usuario directamente a la pantalla inicial.

• Cómo funciona:
  StackActions.popToTop() es parte de las acciones avanzadas de navegación que permite modificar directamente el estado de la pila. Al ejecutarlo, elimina todas las pantallas intermedias, garantizando que el usuario regrese a la raíz.

• Cuándo usarlo:
  Es útil cuando quieres dar al usuario la opción de “reiniciar” la navegación y volver al punto de inicio, como un botón de “Inicio” o “Menú principal”.

Cómo funciona la pila de navegación

La navegación basada en pilas (Stack Navigation) utiliza una estructura de tipo LIFO (Last In, First Out). Cada vez que navegas a una nueva pantalla, esta se apila sobre las anteriores. Cuando regresas con goBack() o popToTop(), se van “sacando” pantallas de esta pila:

• goBack(): Retira solo la pantalla actual y muestra la inmediatamente anterior.
• popToTop(): Retira todas las pantallas excepto la primera.

Por ejemplo, si tu pila de navegación se ve así:
[Home -> Products -> Product -> Settings]

• goBack() desde Settings llevará al usuario de vuelta a Product.
  Pila resultante: [Home -> Products -> Product].

• popToTop() desde Settings llevará al usuario directamente a Home.
  Pila resultante: [Home].

Conclusión

Este ejemplo muestra cómo implementar navegación hacia páginas anteriores utilizando las herramientas proporcionadas por React Navigation. La diferencia principal entre goBack() y popToTop() es el alcance del retroceso:

• goBack() es útil para navegar paso a paso hacia atrás.
• popToTop() es ideal para un reinicio rápido hacia la pantalla inicial.

Ambas herramientas son fundamentales para crear experiencias de navegación intuitivas y flexibles en aplicaciones móviles.