DrawerLayoutAndroid
封装平台 DrawerLayout 的 React 组件（仅限 Android）。抽屉（通常用于导航）使用 renderNavigationView 渲染，直接子视图是主视图（内容所在的位置）。导航视图最初在屏幕上不可见，但可以从 drawerPosition 属性指定的窗口一侧拉入，并且其宽度可以由 drawerWidth 属性设置。
¥React component that wraps the platform DrawerLayout (Android only). The Drawer (typically used for navigation) is rendered with renderNavigationView and direct children are the main view (where your content goes). The navigation view is initially not visible on the screen, but can be pulled in from the side of the window specified by the drawerPosition prop and its width can be set by the drawerWidth prop.
示例
¥Example
- TypeScript
- JavaScript
参考
¥Reference
属性
¥Props
视图属性
继承 视图属性。
¥Inherits View Props.
drawerBackgroundColor
指定抽屉的背景颜色。默认值为 white。如果要设置抽屉的不透明度，请使用 rgba。示例：
¥Specifies the background color of the drawer. The default value is white. If you want to set the opacity of the drawer, use rgba. Example:
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
| 类型 | 必需的 |
|---|---|
| color | 不 |
drawerLockMode
指定抽屉的锁定模式。抽屉可以锁定在 3 种状态：
¥Specifies the lock mode of the drawer. The drawer can be locked in 3 states:
-
未锁定（默认），这意味着抽屉将响应（打开/关闭）触摸手势。
¥unlocked (default), meaning that the drawer will respond (open/close) to touch gestures.
-
锁定关闭，意味着抽屉将保持关闭状态并且不响应手势。
¥locked-closed, meaning that the drawer will stay closed and not respond to gestures.
-
锁定打开，这意味着抽屉将保持打开状态并且不会响应手势。抽屉仍可以通过编程方式打开和关闭 (
openDrawer/closeDrawer)。¥locked-open, meaning that the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically (
openDrawer/closeDrawer).
| 类型 | 必需的 |
|---|---|
| enum('unlocked', 'locked-closed', 'locked-open') | 不 |
drawerPosition
指定抽屉将从屏幕的哪一侧滑入。默认情况下，它设置为 left。
¥Specifies the side of the screen from which the drawer will slide in. By default it is set to left.
| 类型 | 必需的 |
|---|---|
| enum('left', 'right') | 不 |
drawerWidth
指定抽屉的宽度，更准确地说是从窗口边缘拉入的视图的宽度。
¥Specifies the width of the drawer, more precisely the width of the view that be pulled in from the edge of the window.
| 类型 | 必需的 |
|---|---|
| number | 不 |
keyboardDismissMode
确定键盘是否因拖动而消失。
¥Determines whether the keyboard gets dismissed in response to a drag.
-
'none'（默认值），拖动不会关闭键盘。
¥'none' (the default), drags do not dismiss the keyboard.
-
'on-drag'，当拖动开始时键盘消失。
¥'on-drag', the keyboard is dismissed when a drag begins.
| 类型 | 必需的 |
|---|---|
| enum('none', 'on-drag') | 不 |
onDrawerClose
每当导航视图关闭时调用的函数。
¥Function called whenever the navigation view has been closed.
| 类型 | 必需的 |
|---|---|
| function | 不 |
onDrawerOpen
每当导航视图打开时调用的函数。
¥Function called whenever the navigation view has been opened.
| 类型 | 必需的 |
|---|---|
| function | 不 |
onDrawerSlide
每当与导航视图交互时调用的函数。
¥Function called whenever there is an interaction with the navigation view.
| 类型 | 必需的 |
|---|---|
| function | 不 |
onDrawerStateChanged
当抽屉状态发生变化时调用的函数。抽屉可以处于 3 种状态：
¥Function called when the drawer state has changed. The drawer can be in 3 states:
-
空闲，意味着当时没有与导航视图进行交互
¥idle, meaning there is no interaction with the navigation view happening at the time
-
拖动，意味着当前正在与导航视图进行交互
¥dragging, meaning there is currently an interaction with the navigation view
-
解决，意味着与导航视图进行了交互，并且导航视图现在正在完成其关闭或打开动画
¥settling, meaning that there was an interaction with the navigation view, and the navigation view is now finishing its closing or opening animation
| 类型 | 必需的 |
|---|---|
| function | 不 |
renderNavigationView
将渲染到屏幕一侧并可以拉入的导航视图。
¥The navigation view that will be rendered to the side of the screen and can be pulled in.
| 类型 | 必需的 |
|---|---|
| function | 是的 |
statusBarBackgroundColor
让抽屉占据整个屏幕并绘制状态栏的背景，以使其在状态栏上方打开。它仅对 API 21+ 有效。
¥Make the drawer take the entire screen and draw the background of the status bar to allow it to open over the status bar. It will only have an effect on API 21+.
| 类型 | 必需的 |
|---|---|
| color | 不 |
方法
¥Methods
closeDrawer()
closeDrawer();
关闭抽屉。
¥Closes the drawer.
openDrawer()
openDrawer();
打开抽屉。
¥Opens the drawer.