Componente de navegación del cajón nativo de React

En este artículo, vamos a ver cómo implementar Drawer Navigation en react-native. Para ello, vamos a utilizar el componente createDrawerNavigator. Es básicamente el panel de la interfaz de usuario que muestra el menú de navegación. Está oculto de forma predeterminada, pero aparecerá cuando el usuario deslice un dedo desde el borde de la pantalla. En estos días, las aplicaciones móviles se componen de una sola pantalla, así que cree varios componentes de navegación en React Native. Queremos usar React Navigation.

Sintaxis:

const Drawer = createDrawerNavigator();
<Drawer.Navigator>
   <Drawer.Screen />
   <Drawer.Screen />
</Drawer.Navigator> 

Métodos para abrir y cerrar el cajón:

• navigation.openDrawer(): Se utiliza para abrir el cajón.
• navigation.closeDrawer(): Se utiliza para cerrar el cajón.
• navigation.toggleDrawer(): Se utiliza para alternar el cajón.

Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init myapp

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, myapp

  cd myapp

• Paso 4: ahora instala react-navigation en tu proyecto. React Navigation se utiliza para navegar entre una página y otra. Instálalo usando el siguiente comando.

  npm install @react-navigation/native

• Paso 5: ahora instale las dependencias en su proyecto nativo de reacción usando el siguiente comando. 

  npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

• Paso 6: ahora instale el cajón desde react-navigation.

  npm install @react-navigation/drawer

Para React Tab Navigation: Esto también se puede usar en React Native

https://reactnavigation.org/docs/drawer-based-navigation/

Estructura del proyecto:

Ejemplo: ahora implementemos la navegación por cajones. 

import * as React from 'react';
import { Text, View } from 'react-native';
import { createDrawerNavigator } 
         from '@react-navigation/drawer';
import { NavigationContainer } 
         from '@react-navigation/native';
  
function HomeScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', 
                   justifyContent: 'center' }}>
        <Text>Home page</Text>
    </View>
  );
}
  
function NotificationsScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', 
                   justifyContent: 'center' }}>
      <Text>Notifications Page</Text>
    </View>
  );
}
  
function AboutScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', 
                   justifyContent: 'center' }}>
      <Text>About Page</Text>
    </View>
  );
}
const Drawer = createDrawerNavigator();
  
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" 
                       component={NotificationsScreen} />
        <Drawer.Screen name="About" component={AboutScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

Inicie el servidor utilizando el siguiente comando.

npm run android

Salida: si su emulador no se abrió automáticamente, debe hacerlo manualmente. Primero, vaya a su estudio de Android y ejecute el emulador. Ahora inicie el servidor de nuevo. 

Referencia: https://reactnative.dev/docs/navigation#react-navigation