跳到主要内容
版本:0.84

DrawerLayoutAndroid

一个封装了平台 DrawerLayout 的 React 组件(仅 Android)。抽屉(通常用于导航)通过 renderNavigationView 渲染,直接子元素是主视图(内容所在位置)。导航视图最初不会显示在屏幕上,但可以从 drawerPosition 属性指定的窗口一侧滑出,其宽度可以通过 drawerWidth 属性设置。

示例


参考

属性

View Props

继承 View Props


drawerBackgroundColor

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

React 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()

React TSX
closeDrawer();

关闭抽屉。


openDrawer()

React TSX
openDrawer();

打开抽屉。