Una guía completa para la navegación nativa mediante la navegación de reacción

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Conceptos básicos

La Navegación de Reacto se construye alrededor de tres bloques principales de construcción:

• NavigationContainer – el envoltorio más exterior que maneja el árbol de navegación y el estado.
• Navigadores – componentes que definen el patrón de navegación (tapa, pestaña, cajón).
• Creens] – componentes individuales que representan una vista o página en la aplicación.

Cada configuración de navegación debe envolverse en un . Este contenedor se coloca normalmente en la raíz del componente de aplicación.

Configuración de un navegador de Stack

El navegador de pila administra una última pila de pantallas de salida. Utiliza las animaciones y gestos de transición de la plataforma nativa por defecto.

Primero, importar los módulos necesarios:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Crear una instancia de navegador de pila:

const Stack = createNativeStackNavigator();

Define el navegador dentro de tu componente de aplicación:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Cada requiere un prop (utilizado para la navegación) y un prop (el componente de Reacto para renderizar).

Creando Pantallas y Navegando

Las pantallas son componentes estándar React. Reciben dos elementos importantes: y . El objeto proporciona métodos para moverse entre las pantallas. A continuación se muestra una pantalla típica de la casa:

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

La pantalla Detalles no necesita utilizar la propulsión de navegación a menos que necesite navegar más lejos.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Métodos de navegación

La Navegación de Reacto proporciona varios métodos a través del prop:

• navigate(nombre, params)] – se mueve a una pantalla, reutilizando una instancia existente si existe en la pila.
• push(nombre, params)] – siempre empuja una nueva pantalla en la pila, incluso si la misma pantalla ya está en la pila.
• goBack()] – navega a la pantalla anterior en la pila.
• remplaza(nombre, params)] – reemplaza la pantalla actual con una nueva, eliminando la corriente de la historia.
• reset(state)] – reasienta todo el estado de navegación a un objeto estatal dado.

Por ejemplo, para empujar una nueva instancia de la pantalla Detalles y pasar parámetros:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Parámetros Pasantes entre pantallas

Los datos pueden pasar a una pantalla a través del segundo argumento a o . La pantalla receptora accede a esos parámetros a través de .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Establecer valores predeterminados del parámetro utilizando en el componente de pantalla:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Configuración de opciones de navegación

Cada pantalla puede personalizar su encabezado, icono de pestaña, etiqueta de cajón, etc., utilizando el prop en o el prop en el navegador.

Personalización de los jefes

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Se pueden configurar opciones dinámicas utilizando una función que reciba :

options={({ route }) => ({ title: route.params.name })}

Tab Navigator

La navegación de pestañas es común para las secciones de aplicaciones de alto nivel. Instalar el navegador de pestañas de abajo:

npm install @react-navigation/bottom-tabs

Cree un navegador de pestañas y combine con su pila:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Puede anidar el navegador de la pestaña dentro de un navegador de pila o viceversa. Personalizar los iconos de la pestaña usando el prop con .

Dr. Navigator

Un navegador de cajones desliza un cajón de la izquierda, revelando los elementos de navegación. Instalarlo:

npm install @react-navigation/drawer

Configuración de ejemplo:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Use para abrir y cerrar el cajón programadamente.

Navigadores anidados

Las aplicaciones complejas a menudo anidan navegantes (por ejemplo, un navegador de pestañas dentro de un navegador de pila). Reactar Mangos de navegación anidando con gracia. El prop proporcionado a cualquier pantalla puede llamar métodos en un navegador padre si es necesario. Use para acceder a los métodos del navegador padre.

Ejemplo: Una pila que contiene un navegador de pestañas y una pantalla de configuración:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Enlace y profundo

React Navigation soporta la conexión profunda para manejar URLs que abren pantallas específicas. Configure el prop en :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

A continuación, maneje las URL entrantes. Esto permite características como las notificaciones de empuje que se unen a una pantalla específica.

Flujos de autenticación

Muchas aplicaciones requieren navegación condicional basada en el estado de autenticación. Un patrón común es cambiar el navegador a nivel de raíz:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

Alternativamente, usa una sola pila con pantallas condicionales. Evite el apasionamiento manteniendo la promesa o estado actualizado.

Rendimiento y mejores prácticas

• Use navegante de pila nativa] (no ]) para mejorar el rendimiento y las transiciones nativas.
• Minimiza el número de pantallas montadas a la vez. React Navigation desmonta las pantallas ocultas por defecto para los navegantes de pila, pero para los navegantes de pestañas, puede configurar la carga perezosa.
• Pase sólo datos primitivos a través de parámetros para evitar problemas de serialización.
• Use o para componentes de pantalla que reenvian a menudo.
• Evite computaciones pesadas durante las transiciones de navegación; trabajo de descarga con .
• Siempre maneje el evento para los cambios no salvos.

Conclusión

Navegación de reacción proporciona una forma intuitiva, personalizable y performante para gestionar la navegación en aplicaciones nativas de reacción. Al dominar apilar, pestaña, cajón y navegantes anidados, junto con los flujos de paso del parámetro, conexión profunda y autenticación, puede construir experiencias móviles robustas. Para más detalles, consulte la [Reactúa[4]]