DrawerLayoutAndroid
Ta strona została przetłumaczona przez PageTurner AI (beta). Nie jest oficjalnie zatwierdzona przez projekt. Znalazłeś błąd? Zgłoś problem →
Komponent React opakowujący natywny DrawerLayout (tylko Android). Menu boczne (zwykle używane do nawigacji) jest renderowane za pomocą renderNavigationView, a bezpośrednie elementy potomne stanowią główny widok (gdzie trafia twoja zawartość). Widok nawigacyjny początkowo nie jest widoczny na ekranie, ale można go wysunąć z boku okna określonego przez właściwość drawerPosition, a jego szerokość można ustawić za pomocą właściwości drawerWidth.
Przykład
- TypeScript
- JavaScript
Dokumentacja
Właściwości
Właściwości widoku
Dziedziczy właściwości widoku.
drawerBackgroundColor
Określa kolor tła menu bocznego. Domyślna wartość to white. Aby ustawić przezroczystość, użyj formatu rgba. Przykład:
return (
<DrawerLayoutAndroid drawerBackgroundColor="rgba(0,0,0,0.5)" />
);
| Type | Required |
|---|---|
| color | No |
drawerLockMode
Określa tryb blokady menu bocznego. Menu może być zablokowane w 3 stanach:
-
unlocked (domyślnie) - menu reaguje na gesty dotykowe (otwieranie/zamykanie).
-
locked-closed - menu pozostaje zamknięte i nie reaguje na gesty.
-
locked-open - menu pozostaje otwarte i nie reaguje na gesty. Nadal można je otwierać/zamykać programowo (
openDrawer/closeDrawer).
| Type | Required |
|---|---|
| enum('unlocked', 'locked-closed', 'locked-open') | No |
drawerPosition
Określa stronę ekranu, z której wysuwa się menu boczne. Domyślnie ustawione na left.
| Type | Required |
|---|---|
| enum('left', 'right') | No |
drawerWidth
Określa szerokość menu bocznego, dokładniej szerokość widoku wysuwanego z krawędzi okna.
| Type | Required |
|---|---|
| number | No |
keyboardDismissMode
Określa, czy klawiatura ma być chowana w odpowiedzi na przeciąganie.
-
'none' (domyślnie) - przeciąganie nie powoduje chowania klawiatury.
-
'on-drag' - klawiatura jest chowana przy rozpoczęciu przeciągania.
| Type | Required |
|---|---|
| enum('none', 'on-drag') | No |
onDrawerClose
Funkcja wywoływana po zamknięciu widoku nawigacyjnego.
| Type | Required |
|---|---|
| function | No |
onDrawerOpen
Funkcja wywoływana po otwarciu widoku nawigacyjnego.
| Type | Required |
|---|---|
| function | No |
onDrawerSlide
Funkcja wywoływana przy każdej interakcji z widokiem nawigacyjnym.
| Type | Required |
|---|---|
| function | No |
onDrawerStateChanged
Funkcja wywoływana przy zmianie stanu menu bocznego. Dostępne 3 stany:
-
idle - brak aktualnej interakcji z widokiem nawigacyjnym
-
dragging - trwa interakcja z widokiem nawigacyjnym (przeciąganie)
-
settling - zakończono interakcję, a widok kończy animację zamykania/otwierania
| Type | Required |
|---|---|
| function | No |
renderNavigationView
Widok nawigacyjny renderowany z boku ekranu, który można wysunąć.
| Type | Required |
|---|---|
| function | Yes |
statusBarBackgroundColor
Umożliwia menu zajęcie całego ekranu i rysowanie tła paska stanu, aby otwierało się nad nim. Działa tylko w interfejsach API 21+.
| Type | Required |
|---|---|
| color | No |
Metody
closeDrawer()
closeDrawer();
Zamyka menu boczne.
openDrawer()
openDrawer();
Otwiera menu boczne.