【React Native】文件翻譯閱讀紀錄 - Components(組件) - DrawerLayoutAndroid
 |
| Facebook Open Source React Native |
DrawerLayoutAndroid
包含平台 DrawerLayout 的 React 組件（僅限Android）。抽屜（通常用於導航）使用 renderNavigationView 渲染，直接子視圖是主視圖（內容所在的位置）。導航視圖最初在屏幕上不可見，但可以從 drawerPosition prop 指定的窗口側拉入，其寬度可以由 drawerWidth prop 設置。
Example:
render: function() {
var navigationView = (
<View style={{flex: 1, backgroundColor: '#fff'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
</View>
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={{flex: 1, alignItems: 'center'}}>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
<Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
</View>
</DrawerLayoutAndroid>
);
},
Props
renderNavigationViewonDrawerClosedrawerPositiondrawerWidthkeyboardDismissModedrawerLockModeonDrawerOpenonDrawerSlideonDrawerStateChangeddrawerBackgroundColorstatusBarBackgroundColor
Methods
參考
Props
renderNavigationView
導航視圖將呈現在屏幕的一側並可以拉入
| 類型 | 必需 |
|---|---|
| function | Yes |
onDrawerClose
導航視圖關閉時調用的函數。
| 類型 | 必需 |
|---|---|
| function | No |
drawerPosition
指定抽屜將從中滑入的屏幕一側。
| 類型 | 必需 |
|---|---|
| enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right) | No |
drawerWidth
指定抽屜的寬度，更準確地說是從窗口邊緣拉入的視圖的寬度。
| 類型 | 必需 |
|---|---|
| number | No |
keyboardDismissMode
確定鍵盤是否因響應拖動而被解除。
- 'none' (the default), drags不會關閉鍵盤。
- 'on-drag',當拖動開始時鍵盤被解除。
| 類型 | 必需 |
|---|---|
| enum('none', 'on-drag') | No |
drawerLockMode
指定抽屜的鎖定模式。抽屜可以鎖定在3種狀態：
- unlocked (default), 意味著抽屜將響應（打開/關閉）觸摸手勢。
- locked-closed, 意味著抽屜將保持關閉而不響應手勢。
- locked-open, 意味著抽屜將保持打開狀態而不響應手勢。抽屜仍然可以通過編程方式打開和關閉（openDrawer / closeDrawer）。
| 類型 | 必需 |
|---|---|
| enum('unlocked', 'locked-closed', 'locked-open') | No |
onDrawerOpen
每當打開導航視圖時調用的函數。
| TYPE | 必需 |
|---|---|
| function | No |
onDrawerSlide
只要與導航視圖發生交互，就會調用該函數。
| 類型 | 必需 |
|---|---|
| function | No |
onDrawerStateChanged
抽屜狀態發生變化時調用的函數。抽屜可以處於3種狀態：
- idle, 意味著當時沒有與導航視圖發生交互
- dragging, 意味著當前存在與導航視圖的交互
- settling, 意味著與導航視圖存在交互，導航視圖現在正在完成其關閉或打開動畫
| 類型 | 必需 |
|---|---|
| function | No |
drawerBackgroundColor
指定抽屜的背景顏色。默認值為白色。如果要設置抽屜的不透明度，請使用rgba。Example:
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)">
</DrawerLayoutAndroid>
);
| 類型 | 必需 |
|---|---|
| color | No |
statusBarBackgroundColor
使抽屜佔據整個屏幕並繪製狀態欄的背景，以允許它在狀態欄上打開。它只會對API 21+產生影響。
| 類型 | 必需 |
|---|---|
| color | No |
方法
>openDrawer()
openDrawer();
打開 drawer.
>closeDrawer()
closeDrawer();
關上 drawer.
0 意見