跳到主要内容

DrawerLayoutAndroid

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

示例


参考

Props

View Props

继承自 View Props


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

打开抽屉。