createDrawerNavigator
- React Native kursu
- Orta seviye
- Ders 54/116
- 5 dk
createDrawerNavigator ile drawer navigasyonu öğrenirsin.
createDrawerNavigator kullanımı
createDrawerNavigator, React Navigation'ın Drawer için sağladığı üretici fonksiyondur. Çağırınca bir Drawer nesnesi döndürür; bu nesne Drawer.Navigator ve Drawer.Screen bileşenlerini içerir. İçe aktarma: import { createDrawerNavigator } from "@react-navigation/drawer";.
Tipik kullanım: const Drawer = createDrawerNavigator();. Sonra <Drawer.Navigator><Drawer.Screen name="Home" component={HomeScreen} /></Drawer.Navigator> yazarsın. Bu yapı, yan menü navigasyonunun omurgasıdır. Drawer.Navigator bir kapsayıcıdır; tüm ekranları saran üst bileşendir. Drawer.Screen ise tek bir ekranı tanımlar. Bu ayrım, React Navigation'ın tüm navigator'larında aynıdır: Navigator + Screen çifti. Drawer, Bottom Tabs'tan farklı olarak menüyü gizli tutar; kullanıcı yalnızca açmak istediğinde görür. Bu, çok öğeli menüler için yer kazandırır.
Uygulama İki ekranlı Drawer navigator yaz
Önceki dersteki gibi createDrawerNavigator'ı içe aktar ve Drawer'a ata. Sonra bir App bileşeni yaz. Dönüşte <Drawer.Navigator><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Settings" component={SettingsScreen} /></Drawer.Navigator> kullan. HomeScreen ve SettingsScreen basit bileşenler olsun (sadece bir Text döndürsünler).
Başlangıç kodu
// yan menü navigatorunu içe aktar; Drawer'a ata
// Text'i react-native'den içe aktar
// HomeScreen ve SettingsScreen bileşenlerini yaz (her biri bir Text döndürsün)
// App bileşeni yaz; dönüşte Drawer.Navigator içinde iki Drawer.Screen olsunÖrnek çözüm
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Text } from "react-native";
const Drawer = createDrawerNavigator();
function HomeScreen() { return <Text>Ana sayfa</Text>; }
function SettingsScreen() { return <Text>Ayarlar</Text>; }
function App() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeScreen} />
<Drawer.Screen name="Settings" component={SettingsScreen} />
</Drawer.Navigator>
);
}Drawer özelleştirme
Drawer.Navigator, screenOptions veya her Drawer.Screen'in options prop'u ile özelleştirilir. Sık kullanılan ayarlar: drawerPosition (sol veya sağ), drawerType (slide, front, back), drawerActiveTintColor (seçili öğe rengi).
Örnek: <Drawer.Navigator screenOptions={{ drawerPosition: "right" }}> menüyü sağdan açar. drawerType: "front" menüyü ekranın üstüne getirir; back ise menüyü ekranın altına iter. Renk ayarları, marka kimliğine uygun görünüm sağlar. Drawer'ın üstüne bir başlık (kullanıcı adı, avatar) eklemek de yaygındır; bunu drawerContent prop'u ile yaparız. Sonraki derslerde drawer öğelerini ve açma/kapama işlevini öğreneceğiz. Bu özelleştirmeler, uygulamayı kişiselleştirmenin yollarıdır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 createDrawerNavigator'ı içe aktar
import { ____ } from "@react-navigation/drawer";import { createDrawerNavigator } from "@react-navigation/drawer";Açıklama: createDrawerNavigator @react-navigation/drawer'dan içe aktarılır.
2 Drawer.Navigator'ın rolü nedir?
<Drawer.Navigator>...</Drawer.Navigator>- Tek ekran tanımlar
- Tüm ekranları saran kapsayıcıdır Doğru cevap
- İkon ekler
- API çağrısı yapar
Açıklama: Drawer.Navigator tüm ekranları saran kapsayıcıdır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
createDrawerNavigator |
Drawer nesnesini üretir |
Drawer.Navigator |
Ekran kapsayıcısı |
Drawer.Screen |
Tek ekran |
name |
Ekran adı |