DrawerLayoutAndroid
React 組件，包裝了平台 DrawerLayout (僅限 Android)。Drawer (通常用於導航) 使用 renderNavigationView 渲染，而直接子組件是主視圖 (您的內容放置處)。導航視圖最初在螢幕上不可見，但可以從 drawerPosition 屬性指定的視窗側邊拉入，其寬度可以通過 drawerWidth 屬性設定。
範例
- TypeScript
- JavaScript
參考
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();
開啟抽屜。