DrawerLayoutAndroid

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Componente de React que envuelve la plataforma DrawerLayout (solo para Android). El Drawer (normalmente usado para navegación) se renderiza con renderNavigationView y los hijos directos representan la vista principal (donde va tu contenido). La vista de navegación inicialmente no es visible en pantalla, pero puede deslizarse desde el lateral de la ventana especificado por la prop drawerPosition, y su ancho puede configurarse con la prop drawerWidth.

Ejemplo

TypeScript

JavaScript

---

Referencia

Props

Props de View

Hereda Props de View.

---

drawerBackgroundColor

Especifica el color de fondo del Drawer. El valor predeterminado es white. Si necesitas configurar la opacidad del Drawer, usa rgba. Ejemplo:

tsx

return (
  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);

Type	Required
color	No

---

drawerLockMode

Especifica el modo de bloqueo del Drawer. Puede bloquearse en 3 estados:

• unlocked (predeterminado): el Drawer responde (abre/cierra) a gestos táctiles.

• locked-closed: el Drawer permanece cerrado y no responde a gestos.

• locked-open: el Drawer permanece abierto y no responde a gestos. Aún puede abrirse/cerrarse programáticamente (openDrawer/closeDrawer).

Type	Required
enum('unlocked', 'locked-closed', 'locked-open')	No

---

drawerPosition

Especifica el lateral de la pantalla desde donde se desliza el Drawer. Por defecto es left.

Type	Required
enum('left', 'right')	No

---

drawerWidth

Especifica el ancho del Drawer, concretamente el ancho de la vista que se desliza desde el borde de la ventana.

Type	Required
number	No

---

keyboardDismissMode

Determina si el teclado se oculta al arrastrar:

• 'none' (predeterminado): los arrastres no ocultan el teclado.

• 'on-drag': el teclado se oculta cuando comienza un arrastre.

Type	Required
enum('none', 'on-drag')	No

---

onDrawerClose

Función llamada cada vez que se cierra la vista de navegación.

Type	Required
function	No

---

onDrawerOpen

Función llamada cada vez que se abre la vista de navegación.

Type	Required
function	No

---

onDrawerSlide

Función llamada cada vez que hay interacción con la vista de navegación.

Type	Required
function	No

---

onDrawerStateChanged

Función llamada cuando cambia el estado del Drawer. Los estados posibles son:

• idle: no hay interacción con la vista de navegación en ese momento.

• dragging: hay interacción activa con la vista de navegación.

• settling: tras una interacción, la vista está completando su animación de apertura/cierre.

Type	Required
function	No

---

renderNavigationView

Vista de navegación que se renderiza en el lateral de la pantalla y puede deslizarse.

Type	Required
function	Yes

---

statusBarBackgroundColor

Hace que el Drawer ocupe toda la pantalla y dibuje el fondo de la barra de estado, permitiendo que se abra sobre ella. Solo tiene efecto en API 21+.

Type	Required
color	No

Métodos

closeDrawer()

tsx

closeDrawer();

Cierra el Drawer.

---

openDrawer()

tsx

openDrawer();

Abre el Drawer.