Aprenda cómo puede construir un sistema de navegación sólido para su aplicación React Native usando la biblioteca React Navigation.

Las aplicaciones móviles deben tener un sistema de navegación que guíe a los usuarios sin esfuerzo a través de varias pantallas y funcionalidades.

React Navigation, una biblioteca de navegación poderosa y flexible para React Native, puede ayudarlo a crear esa experiencia. Al aprovechar sus capacidades, puede construir sin esfuerzo un gran sistema de navegación móvil.

Instalación de la biblioteca de navegación de React

React Navigation ofrece tres patrones de navegación principales, a saber, la navegación Stack, Tab y Drawer para construir un sistema de navegación. Estos patrones de navegación brindan un marco para organizar y administrar la navegación entre diferentes pantallas dentro de su aplicación.

Para comenzar a usar React Navigation, instale la biblioteca y sus dependencias necesarias:

npm instalar @react-navigation/nativo
npm install react-native-screens react-native-safe-area-context
instagram viewer

Configuración de un navegador

Cada navegador dentro de React Navigation vive en su propia biblioteca separada. Para utilizar cualquiera de los navegadores, deberá instalarlos individualmente.

Una estructura de proyecto bien pensada es útil al crear un sistema de navegación para su aplicación móvil. Una buena práctica es crear un origen carpeta en el directorio raíz de su proyecto. Dentro de esta carpeta, debe tener un pantallas carpeta. Esto servirá para separar los componentes de su pantalla de otros componentes.

Estarás escribiendo el código para configurar el patrón de navegación que estás usando dentro de tu proyecto. Aplicación.js archivo.

Creando un Navegador dentro del Aplicación.js file es una mejor práctica por varias razones:

  • El Aplicación.js El archivo suele ser el componente de nivel superior en una aplicación React Native. Definir el Navegador en este archivo garantizará que la jerarquía de navegación se encuentre en el nivel más alto de su árbol de componentes y sea accesible en todo momento.
  • Colocando el Navegador en el Aplicación.js El archivo le permite acceder fácilmente y transmitir el estado y los accesorios de toda la aplicación a las pantallas dentro del navegador.
  • Reaccionar de navegación NavegaciónContenedor proporciona el contexto necesario para la navegación y normalmente se encuentra dentro Aplicación.js. Al colocar el Navegador en el mismo archivo, puede integrarlo fácilmente con el NavegaciónContenedor.

Navegador de pila

Stack Navigator es el patrón de navegación más popular dentro de la biblioteca React Navigation. Utiliza una estructura de datos de pila donde cada pantalla es un componente completamente diferente y se apila sobre la anterior.

Cuando se coloca una nueva pantalla en la parte superior de la pila, se convierte en la pantalla activa y la pantalla anterior se arroja debajo de ella. Esto permite a los usuarios navegar de un lado a otro a través de la pila, como el flujo de navegación de un sitio web. Puede configurar el navegador de pila para la transición de una pantalla a otra.

Por ejemplo:

importar Reaccionar de'reaccionar';
importar {Contenedor de navegación} de'@react-navegación/nativo';
importar {createStackNavigator} de'@react-navegación/pila';
// Importa los componentes de tu pantalla
importar Pantalla de inicio de'./pantallas/Pantalla de inicio';
importar DetallesPantalla de'./pantallas/DetallesPantalla';


constante Pila = createStackNavigator();


constante aplicación = () => {
devolver (


"Hogar" componente={Pantalla de inicio} />
"Detalles" componente={Pantalla de detalles} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exportarpor defecto aplicación;

El bloque de código anterior crea un componente Stack Navigator usando crearStackNavigator() de la biblioteca de navegación.

En este ejemplo, Stack Navigator tiene dos pantallas: Hogar y Detalles.

Ahora instale Stack Navigator:

npm instalar @react-navigation/stack

Adentro Pantalla de inicio, puedes usar el navegación objeto para probar el Stack Navigator:

importar { Hoja de estilo, Vista, Botón } de"reaccionar-nativo";
importar Reaccionar de"reaccionar";
constante Pantalla de inicio = ({ navegación }) => {
devolver (

 titulo="Navegar a .."
 onPress={() => navegación.navegar("Pantalla de detalles")}
 />
 </View>
 );
};


exportarpor defecto Pantalla de inicio;
constante estilos = StyleSheet.create({});
2 Imágenes

Observe cómo Stack Navigator crea automáticamente un botón de flecha para manejar la navegación hacia atrás a las pantallas anteriores.

Navegador de pestañas

En algunas situaciones, tener un sistema de navegación de ida y vuelta como Stack Navigator no proporciona una gran experiencia. Un navegador de pestañas es más adecuado para estos casos. Muestra las pantallas de navegación disponibles por adelantado para el usuario y puede ser más fácil de usar, como una barra de navegación web.

Para comenzar, instale el @react-navigation/bottom-tabs biblioteca usando el administrador de paquetes NPM.

Con crearNavegadorInferior(), puede crear una instancia de Tab Navigator como lo hizo con Stack Navigator:

importar { createBottomTabNavigator } de'@react-navigation/bottom-tabs';
constante Tabulador = createBottomTabNavigator();

Y luego, defina las pantallas que desea como pestañas dentro del navegador y NavegaciónContenedor:

exportarpor defectofunciónaplicación() {
devolver (


 nombre="Hogar"
 componente={Pantalla de inicio}
 opciones={{ título: "Hogar" }}
 />
 nombre="Perfil"
 componente={Pantalla de perfil}
 opciones={{ título: "Perfil" }}
 />
 nombre="Detalles"
 componente={Pantalla de detalles}
 opciones={{ título: "Detalles" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Al ejecutar su aplicación, debería ver un Navegador de pestañas con sus pantallas definidas en la parte inferior.

3 Imágenes

Podrías usar el tabBarPosición opción para colocar el navegador en el arriba, bien, izquierda, o abajo (por defecto).

Navegador de cajones

Los navegadores de cajones, o cajones, son un patrón de navegación común en las aplicaciones móviles. Puede abrir los cajones deslizando o tocando un botón. Esto hace que el cajón se deslice hacia adentro desde el costado de la pantalla, revelando su contenido.

2 Imágenes

Para usar el navegador del cajón, instálelo junto con manejador de gestos nativos de reacción y reaccionar-nativo-reanimado:

npm instalar @react-navigation/cajón
npm install react-native-gesture-handler reaccionar-nativo-reanimado

Deberá configurar también reanimated dentro de su babel.config.js archivo:

módulo.exportaciones = {
 Preajustes: ["babel-preset-expo"],
 complementos: ["reaccionar-nativo-reanimado/complemento"],
};

Este es un ejemplo de cómo configurar un Navegador de cajones:

importar"controlador de gestos nativos de reacción"; // Esta importación debe estar en la parte superior
importar { Ver, Texto, Botón } de"reaccionar-nativo";
importar { crearDrawerNavigator } de"@react-navegación/cajón";
importar {Contenedor de navegación} de"@react-navegación/nativo";


constante Cajón = createDrawerNavigator();


constante Contenido del cajón = ({ navegación }) => {
devolver (
doblar: 1, alinear elementos: "centro", justificar el contenido: "centro" }}>
tamaño de fuente: 24, fuentePeso: "atrevido" }}>
 Bienvenido al Cajón
 </Text>

 Este es un contenido adicional que puede mostrar en el cajón.
 </Text>


constante aplicación = () => (

 NombreRutaInicial="Hogar"
 cajónContenido={(accesorios) => <Contenido del cajón {...accesorios} />}
 >
 {/* Tus otras pantallas aquí */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exportarpor defecto aplicación;

En este ejemplo, el Contenido del cajón componente se pasa como el cajónContenido apoyar a crearDrawerNavigator. Dentro de Contenido del cajón componente, puede personalizar el contenido para mostrar la información deseada utilizando componentes de texto o cualquier otro elemento y estilo.

Los navegadores de pestañas son estáticos y siempre visibles. Esto no siempre es lo mejor, ya que las pestañas bloquean partes de la pantalla y pueden desviar el foco de la pantalla principal. Puede usar los cajones como un navegador de pestañas dinámico y crear un menú de navegación dentro de los cajones. Luego, los usuarios pueden abrir el cajón para encontrar un menú de navegación.

También puede usar el cajón para mostrar contenido adicional como una barra de búsqueda, un perfil de usuario, información contextual o cualquier cosa que no requiera una vista de pantalla completa.

Considere estas prácticas recomendadas para aprovechar al máximo el Navegador de cajones:

  • Evite sobrecargar el cajón con demasiadas opciones y concéntrese en presentar las funciones más relevantes y de uso frecuente.
  • Categorice elementos relacionados de forma lógica e intuitiva para ayudar a los usuarios a encontrar rápidamente lo que buscan.
  • Use íconos o indicadores visuales para ayudar a los usuarios a comprender el propósito de cada artículo en el cajón.

Pasar datos con accesorios de navegación

React Navigation proporciona un mecanismo poderoso que le permite pasar datos a través de accesorios de navegación.

Considere un escenario en el que tiene una lista de elementos en una pantalla y, cuando un usuario selecciona un elemento, desea pasar los datos correspondientes a otra pantalla.

Primero, necesitas definir tu estructura de navegación. Ahora, para pasar datos desde el Pantalla de inicio a un Pantalla de detalles cuando se selecciona un elemento, dentro Pantalla de inicio defina una función que maneje la navegación e incluya los datos que desea pasar.

importar Reaccionar de'reaccionar';
importar { Ver, Texto, Botón } de'reaccionar-nativo';
constante Pantalla de inicio = ({ navegación }) => {
constante manejarItemPress = (artículo) => {
 navegación.navegar('Pantalla de detalles', { artículo });
 };


devolver (

Lista de Artículos</Text>
exportarpor defecto Pantalla de inicio;

El handleItemPress función utiliza el navegación.navegar método para navegar a la Pantalla de detalles mientras pasa los datos del elemento seleccionado como un parámetro en el segundo argumento.

Para poder acceder a los datos pasados ​​dentro del Pantalla de detalles componente, necesitará el navegación apuntalar:

importar Reaccionar de'reaccionar';
importar { Ver, Texto } de'reaccionar-nativo';
constante Pantalla de detalles = ({ navegación }) => {
constante item = navegación.getParam('artículo', '');


devolver (

Pantalla de detalles</Text>
{elemento}</Text>
 </View>
 );
};
exportarpor defecto Pantalla de detalles;

Aquí el Pantalla de detalles usos de los componentes navegación.getParam para recuperar el elemento pasado de los apoyos de navegación. En este ejemplo, se establece un valor predeterminado de una cadena vacía en caso de que los datos no estén disponibles. De esta manera, su aplicación no se bloqueará al renderizar.

Dependiendo de la complejidad de su aplicación, puede explorar el uso de bibliotecas de administración de estado como Redux o la API de contexto para administrar y compartir datos globalmente.

Organización de su código de navegación

La organización adecuada de su código de navegación lo ayudará a crear una aplicación React Native escalable y colaborativa. Puede hacerlo dividiendo la lógica de navegación en módulos manejables. Esto hará que sea fácil de leer y entender.

Con esto, puede estar seguro de crear una navegación fluida para sus usuarios mientras disfruta de la experiencia de desarrollo.