Guías Técnicas

DrawerLayoutAndroid en React Native: Crear Menú Desplegable

  ¿Qué es DrawerLayoutAndroid y para qué se usa?

DrawerLayoutAndroid es un componente nativo exclusivo para Android. Permite implementar un menú lateral deslizante (también conocido como drawer navigation o sidebar), similar al que se ve comúnmente en muchas aplicaciones móviles.

  Qué hace DrawerLayoutAndroid en React Native

Muestra un panel deslizable desde el borde izquierdo o derecho de la pantalla. Dentro de este panel puedes poner cualquier contenido, como un menú de navegación.

Estructura básica de DrawerLayoutAndroid

El componente DrawerLayoutAndroid contiene dos secciones principales:

  1. renderNavigationView: El contenido del menú lateral.
  2. children: El contenido principal de la aplicación.

El DrawerLayoutAndroid permite abrir y cerrar el menú deslizando desde el borde de la pantalla o programáticamente.

🚀 Ejemplo Básico: Crear un Drawer Layout

Este es un ejemplo básico que muestra cómo implementar un menú lateral utilizando DrawerLayoutAndroid.

jsx 
import React, { useState } from 'react';
import { DrawerLayoutAndroid, Text, View, Button, StyleSheet } from 'react-native';

const App = () => {
let drawer = null;

const renderNavigationView = () => (
  <View style={styles.menu}>
    <Text style={styles.menuItem}>Item 1</Text>
    <Text style={styles.menuItem}>Item 2</Text>
    <Text style={styles.menuItem}>Item 3</Text>
    <Button
      title="Cerrar Menú"
      onPress={() => drawer.closeDrawer()}
    />
  </View>
);

return (
  <DrawerLayoutAndroid
    ref={(ref) => (drawer = ref)}
    drawerWidth={300}
    renderNavigationView={renderNavigationView}
  >
    <View style={styles.container}>
      <Text>Contenido Principal</Text>
      <Button title="Abrir Menú" onPress={() => drawer.openDrawer()} />
    </View>
  </DrawerLayoutAndroid>
);
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  menu: {
    flex: 1,
    backgroundColor: '#ddd',
    padding: 20,
  },
  menuItem: {
    fontSize: 20,
    marginVertical: 10,
  },
});

export default App;


Propiedades más comunes de DrawerLayoutAndroid

  • drawerWidth: Establece el ancho del menú lateral. El valor por defecto es 300.
  • renderNavigationView: Función que devuelve el contenido que se mostrará en el menú lateral.
  • openDrawer(): Método utilizado para abrir el menú lateral programáticamente.
  • closeDrawer(): Método utilizado para cerrar el menú lateral programáticamente.
  • onDrawerOpen: Evento que se dispara cuando el menú se abre.
  • onDrawerClose: Evento que se dispara cuando el menú se cierra.

🚪 Abrir y Cerrar el Menú

Se puede abrir y cerrar el menú de manera programática utilizando los métodos openDrawer() y closeDrawer(). Aquí tienes un ejemplo de cómo hacerlo:

jsx 
const openMenu = () => {
  drawer.openDrawer(); // Abre el menú
};

const closeMenu = () => {
  drawer.closeDrawer(); // Cierra el menú
};

🖱️ Cambiar el Comportamiento del Menú

Puedes controlar el comportamiento del menú, como si se debe abrir desde el borde izquierdo o derecho, utilizando propiedades como drawerPosition.

  • drawerPosition: Establece la posición del menú. Puede ser left (predeterminado) o right.
jsx 
<DrawerLayoutAndroid
  ref={(ref) => (drawer = ref)}
  drawerWidth={300}
  renderNavigationView={renderNavigationView}
  drawerPosition="right" // Menú en el lado derecho
>
  <View style={styles.container}>
    <Text>Contenido Principal</Text>
    <Button title="Abrir Menú" onPress={() => drawer.openDrawer()} />
  </View>
</DrawerLayoutAndroid>
  Resumen

DrawerLayoutAndroid es un componente fundamental en React Native para crear menús laterales en aplicaciones Android. Permite que los usuarios deslicen el dedo desde el borde izquierdo (o derecho) de la pantalla para acceder a un menú con opciones adicionales. A través de este componente, se puede crear una navegación fluida y accesible para aplicaciones Android.