DrawerLayoutAndroid

包裹平台 DrawerLayout 的 React 组件（仅 Android）。抽屉（通常用于导航）通过 renderNavigationView 渲染，直接子元素是主视图（内容所在位置）。导航视图在屏幕上最初不可见，但可以从 drawerPosition 属性指定的窗口一侧滑入，其宽度可通过 drawerWidth 属性设置。

示例

TypeScript

JavaScript

---

参考

属性

View Props

继承 View Props。

---

drawerBackgroundColor

指定抽屉的背景颜色。默认值为 white。如果你想设置抽屉的不透明度，请使用 rgba。示例：

React TSX

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

Type	Required
color	No

---

drawerLockMode

指定抽屉的锁定模式。抽屉可以处于 3 种状态：

• unlocked（默认），表示抽屉会响应触摸手势（打开/关闭）。
• locked-closed，表示抽屉将保持关闭状态且不响应手势。
• locked-open，表示抽屉将保持打开状态且不响应手势。抽屉仍然可以通过编程方式打开和关闭（openDrawer/closeDrawer）。

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

---

drawerPosition

指定抽屉从屏幕哪一侧滑入。默认设置为 left。

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

---

drawerWidth

指定抽屉的宽度，更准确地说，是从窗口边缘拉入的视图宽度。

Type	Required
number	No

---

keyboardDismissMode

决定在拖动时键盘是否会被关闭。

• 'none'（默认），拖动不会关闭键盘。
• 'on-drag'，拖动开始时键盘会被关闭。

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

---

onDrawerClose

每当导航视图关闭时调用的函数。

Type	Required
function	No

---

onDrawerOpen

每当导航视图打开时调用的函数。

Type	Required
function	No

---

onDrawerSlide

每当与导航视图发生交互时调用的函数。

Type	Required
function	No

---

onDrawerStateChanged

当抽屉状态发生变化时调用的函数。抽屉可以处于 3 种状态：

• idle，表示此时没有与导航视图发生交互
• dragging，表示当前正在与导航视图交互
• settling，表示曾与导航视图发生过交互，导航视图正在完成关闭或打开动画

Type	Required
function	No

---

renderNavigationView

将渲染在屏幕侧边并可被拉入的导航视图。

Type	Required
function	Yes

---

statusBarBackgroundColor

让抽屉占据整个屏幕，并绘制状态栏的背景，以便它可以在状态栏上方打开。它仅在 API 21+ 上生效。

Type	Required
color	No

方法

closeDrawer()

React TSX

closeDrawer();

关闭抽屉。

---

openDrawer()

React TSX

openDrawer();

打开抽屉。