跳到主要内容
版本:0.80

DrawerLayoutAndroid

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

示例


参考

属性

View 属性

继承 View 属性


drawerBackgroundColor

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

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

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+ 生效。

类型必填
颜色

方法

closeDrawer()

tsx
closeDrawer();

关闭抽屉。


openDrawer()

tsx
openDrawer();

打开抽屉。