React Native
Drawer toggle
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.
Örnek çözümü göster
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.
Kendini test et
-
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
Cevabı göster
Drawer açıksa kapatır, kapalıysa açar — toggleDrawer Drawer'ı açar ya da kapatır; durumuna göre.
-
useNavigation'ı çağır
const ____ = useNavigation();
Cevabı göster
const navigation = useNavigation();
-
Kavramı rolüne eşle
- useNavigation
- Navigasyon nesnesi verir
- toggleDrawer
- Açar/kapatır
- openDrawer
- Yalnız açar
- closeDrawer
- Yalnız kapatır
Sıradaki ders: Nested navigation
