DrawerLayoutAndroid
React 组件,用于包裹平台原生的 DrawerLayout
(仅限 Android)。抽屉 (通常用于导航) 通过 renderNavigationView
渲染,直接子元素是主视图 (用于放置你的内容)。导航视图初始时在屏幕上不可见,但可以从 drawerPosition
属性指定的窗口侧边拉出,其宽度可以通过 drawerWidth
属性设置。
示例
- TypeScript
- JavaScript
参考
属性
View 属性
继承自 View 属性。
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();
打开抽屉。