createDrawerNavigator

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).

Örnek çözümü göster

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.

Kendini test et

createDrawerNavigator'ı içe aktar

import { ____ } from "@react-navigation/drawer";

Cevabı göster

import { createDrawerNavigator } from "@react-navigation/drawer";

Drawer.Navigator'ın rolü nedir?
```
<Drawer.Navigator>...</Drawer.Navigator>
```
- Tek ekran tanımlar
- Tüm ekranları saran kapsayıcıdır
- İkon ekler
- API çağrısı yapar
Cevabı göster

Tüm ekranları saran kapsayıcıdır — Drawer.Navigator tüm ekranları saran kapsayıcıdır.
Kavramı rolüne eşle

createDrawerNavigator

Drawer nesnesini üretir
Drawer.Navigator

Ekran kapsayıcısı
Drawer.Screen

Tek ekran
name

Ekran adı

Sıradaki ders: Drawer items

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler