跳到主要内容

DrawerLayoutAndroid

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

示例​

参考

属性​

视图属性​

继承自 View 属性。

drawerBackgroundColor​

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

tsx
return (
  <DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
类型必需
颜色否

drawerLockMode​

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

  • unlocked（默认），表示抽屉将响应（打开/关闭）触摸手势。
  • locked-closed，表示抽屉将保持关闭，不响应手势。
  • locked-open，表示抽屉将保持打开，不响应手势。抽屉仍然可以通过编程方式打开和关闭 (openDrawer/closeDrawer)。
类型必需
枚举值：('unlocked', 'locked-closed', 'locked-open')否

drawerPosition​

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

类型必需
枚举值：('left', 'right')否

drawerWidth​

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

类型必需
数字否

keyboardDismissMode​

决定键盘是否响应拖动而关闭。

  • 'none' (默认)，拖动不会关闭键盘。
  • 'on-drag'，当拖动开始时，键盘会关闭。
类型必需
枚举值：('none', 'on-drag')否

onDrawerClose​

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

类型必需
函数否

onDrawerOpen​

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

类型必需
函数否

onDrawerSlide​

与导航视图交互时调用的函数。

类型必需
函数否

onDrawerStateChanged​

抽屉状态改变时调用的函数。抽屉可以处于 3 种状态：

  • idle，表示当前没有与导航视图进行交互
  • dragging，表示当前正在与导航视图进行交互
  • settling，表示之前与导航视图进行了交互，现在导航视图正在完成其关闭或打开动画
类型必需
函数否

renderNavigationView​

将被渲染到屏幕侧面并可以拉入的导航视图。

类型必需
函数是

statusBarBackgroundColor​

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

类型必需
颜色否

方法​

closeDrawer()​

tsx
closeDrawer();

关闭抽屉。

openDrawer()​

tsx
openDrawer();

打开抽屉。