DrawerLayoutAndroid
封装了平台 DrawerLayout 的 React 组件(仅限 Android)。抽屉(通常用于导航)通过 renderNavigationView 渲染,直接子元素是主视图(你的内容所在处)。导航视图最初在屏幕上不可见,但可以通过 drawerPosition 属性指定的窗口侧面拉入,其宽度可以通过 drawerWidth 属性设置。
示例
- TypeScript
- JavaScript
参考
属性
View 属性
继承 View 属性。
drawerBackgroundColor
指定抽屉的背景颜色。默认值为 white。如果你想设置抽屉的透明度,请使用 rgba。例如:
tsx
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
| 类型 | 是否必需 |
|---|---|
| color | 否 |
drawerLockMode
指定抽屉的锁定模式。抽屉可以锁定在 3 种状态:
- unlocked(默认),表示抽屉将响应(打开/关闭)触摸手势。
- locked-closed,表示抽屉将保持关闭且不响应手势。
- locked-open,表示抽屉将保持打开且不响应手势。抽屉仍然可以通过编程方式打开和关闭(
openDrawer/closeDrawer)。
| 类型 | 是否必需 |
|---|---|
| enum('unlocked', 'locked-closed', 'locked-open') | 否 |
drawerPosition
指定抽屉将从屏幕的哪一侧滑入。默认设置为 left。
| 类型 | 是否必需 |
|---|---|
| enum('left', 'right') | 否 |
drawerWidth
指定抽屉的宽度,更确切地说,是从窗口边缘拉入的视图的宽度。
| 类型 | 是否必需 |
|---|---|
| number | 否 |
keyboardDismissMode
确定键盘是否响应拖动而被关闭。
- 'none'(默认),拖动不会关闭键盘。
- 'on-drag',当拖动开始时键盘被关闭。
| 类型 | 是否必需 |
|---|---|
| enum('none', 'on-drag') | 否 |
onDrawerClose
每当导航视图关闭时调用的函数。
| 类型 | 是否必需 |
|---|---|
| function | 否 |
onDrawerOpen
每当导航视图打开时调用的函数。
| 类型 | 是否必需 |
|---|---|
| function | 否 |
onDrawerSlide
每当与导航视图有交互时调用的函数。
| 类型 | 是否必需 |
|---|---|
| function | 否 |
onDrawerStateChanged
当抽屉状态改变时调用的函数。抽屉可以处于 3 种状态:
- idle,表示当前没有与导航视图发生交互
- dragging,表示当前正在与导航视图进行交互
- settling,表示之前与导航视图有过交互,且导航视图正在完成其关闭或打开动画
| 类型 | 是否必需 |
|---|---|
| function | 否 |
renderNavigationView
将渲染到屏幕侧面并可被拉入的导航视图。
| 类型 | 是否必需 |
|---|---|
| function | 是 |
statusBarBackgroundColor
使抽屉占据整个屏幕并绘制状态栏的背景,以允许其打开覆盖状态栏。仅对 API 21+ 有效。
| 类型 | 是否必需 |
|---|---|
| color | 否 |
方法
closeDrawer()
tsx
closeDrawer();
关闭抽屉。
openDrawer()
tsx
openDrawer();
打开抽屉。