Navegación entre pantallas y transmisión de parámetros

Cada componente registrado como pantalla en un navegador de React Navigation recibe automáticamente una prop navigation. Este objeto proporciona métodos para cambiar de pantalla, volver atrás y gestionar la pila de navegación. También puede acceder a él en componentes anidados mediante el hook useNavigation.

Llame a navigation.navigate('ScreenName') para ir a otra pantalla. Si la pantalla ya está en la pila y vuelve a navegar hacia ella, React Navigation irá a la instancia existente en lugar de añadir un duplicado. Use navigation.push('ScreenName') para insertar siempre una instancia nueva.

Llame a navigation.goBack() para extraer la pantalla actual de la pila y volver a la anterior. En iOS, el gesto de deslizar para volver está activado de forma predeterminada. En Android, el botón físico Atrás llama automáticamente a goBack. Use navigation.popToTop() para volver directamente a la primera pantalla.

Pase un segundo argumento a navigation.navigate para enviar parámetros a la pantalla de destino. El objeto de parámetros puede contener cualquier dato serializable: identificadores, cadenas o valores booleanos. Evite pasar objetos complejos no serializables, como instancias de clases o funciones.

La pantalla de destino recibe una prop route junto con la prop navigation. Acceda a los parámetros que ha pasado mediante route.params. Proporcione siempre valores predeterminados por si una pantalla se abre sin parámetros, por ejemplo, cuando es la pantalla inicial.

Establezca initialParams en un Stack.Screen para proporcionar valores de parámetros predeterminados. Estos valores se combinan con los parámetros pasados durante la ejecución, por lo que la pantalla siempre dispone de un conjunto completo de valores con los que trabajar, incluso cuando se abre como ruta inicial.

Una pantalla puede actualizar sus propios parámetros mediante navigation.setParams. Esto resulta útil cuando una acción realizada en la pantalla actual, como editar un campo de formulario, debe reflejarse en el título del encabezado de navegación. La actualización de los parámetros desencadena un nuevo renderizado de la pantalla.

Los componentes secundarios profundos que no están registrados como pantallas no reciben automáticamente la prop navigation. Use el hook useNavigation() de React Navigation para acceder al objeto de navegación desde cualquier lugar del árbol del navegador sin tener que pasar props por varios niveles.

De forma similar, use el hook useRoute() para acceder a route.params desde un componente que no sea una pantalla. Esto resulta útil cuando tiene un componente profundamente anidado que necesita leer los parámetros de la pantalla actual sin pasar la prop route por cada nivel.

Puede establecer dinámicamente el título del encabezado de navegación a partir de los parámetros de la ruta pasando una función a la prop options. La función recibe el objeto route, lo que permite usar los valores de los parámetros como título de la pantalla sin necesidad de usar estado adicional.

Para enviar datos desde una pantalla secundaria a su pantalla principal, use navigation.navigate con el nombre de la pantalla principal e incluya los datos de retorno como parámetros. La pantalla principal recibirá los parámetros actualizados. Como alternativa, pase una función de callback como parámetro a la pantalla secundaria y llámela antes de volver atrás.

En esta lección aprendió: usar navigation.navigate para desplazarse a otra pantalla, pasar parámetros como segundo argumento de navigate y leer los parámetros con route.params en la pantalla de destino. A continuación, exploraremos el Bottom Tab Navigator.