Drawer toggle
- React Native kursu
- Orta seviye
- Ders 56/116
- 5 dk
Drawer açma/kapama öğrenirsin.
Drawer toggle
Drawer'ı açıp kapatmak için useNavigation hook'unu kullanırsın. Bu hook, bileşenin içinde navigasyon nesnesini verir. navigation.toggleDrawer() Drawer'ı açar ya da kapatır; navigation.openDrawer() yalnızca açar; navigation.closeDrawer() yalnızca kapatır.
Tipik kullanım: bir butonun onPress'ine () => navigation.toggleDrawer() verirsin. Bu buton genellikle başlık çubuğundaki hamburger ikonudur. useNavigation hook'unu @react-navigation/native'den içe aktarırsın: import { useNavigation } from "@react-navigation/native";. Drawer açıkken kullanıcı bir öğe seçerse Drawer otomatik kapanır ve seçilen ekrana geçilir. Bu davranış varsayılandır; ek kod gerekmez. Drawer toggle, kullanıcının menüye erişiminin temel yoludur.
Uygulama Drawer toggle butonu yaz
Bir HomeScreen bileşeni yaz. useNavigation'ı @react-navigation/native'den içe aktar ve çağırıp navigation'a ata. Bir Button döndür; onPress'ini () => navigation.toggleDrawer() yap, title'ı "Menü" yap. Text ve Button'u react-native'den içe aktar.
Başlangıç kodu
// Navigasyon hook'unu içe aktar
// Text ve Button'u react-native'den içe aktar
function HomeScreen() {
// Hook'u çağır; navigation'a ata
// Button döndür; onPress'te Drawer'ı aç/kapa
return null;
}Örnek çözüm
import { useNavigation } from "@react-navigation/native";
import { Button, Text } from "react-native";
function HomeScreen() {
const navigation = useNavigation();
return (
<>
<Text>Ana sayfa</Text>
<Button title="Menü" onPress={() => navigation.toggleDrawer()} />
</>
);
}useNavigation hook'u
useNavigation, React Navigation'ın sunduğu bir hook'tür. Bileşenin içinde navigation nesnesini verir. Bu nesne, tüm navigasyon işlevlerini taşır: navigate, goBack, toggleDrawer, openDrawer, closeDrawer.
Hook, props ile navigator'a erişmek yerine bileşenin her yerinden navigasyonu kullanmayı sağlar. Derin bileşen ağaçlarında props aktarımı yapmadan navigasyonu çağırabilirsin. Bu, kodu temiz tutar. navigation.navigate("Settings") başka bir ekrana geçer; navigation.goBack() bir önceki ekrana döner. Drawer ile birlikte kullanıldığında navigation.toggleDrawer() menüyü açıp kapatır. Bu hook, React Navigation'ın en sık kullanılan API'lerinden biridir. Tüm modern React Navigation kodunda karşına çıkar.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 navigation.toggleDrawer() ne yapar?
navigation.toggleDrawer();- Yalnızca Drawer'ı açar
- Yalnızca Drawer'ı kapatır
- Hiçbir şey
- Drawer açıksa kapatır, kapalıysa açar Doğru cevap
Açıklama: toggleDrawer Drawer'ı açar ya da kapatır; durumuna göre.
2 useNavigation'ı çağır
const ____ = useNavigation();const navigation = useNavigation();Açıklama: const navigation = useNavigation(); ile navigasyon nesnesini alırsın.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
useNavigation |
Navigasyon nesnesi verir |
toggleDrawer |
Açar/kapatır |
openDrawer |
Yalnız açar |
closeDrawer |
Yalnız kapatır |