Nested navigation

Stack ve Drawer'ı iç içe kullanmayı öğrenirsin.

İç içe navigasyon

İç içe navigasyon (nested navigation), iki veya daha fazla navigator'ı bir arada kullanmaktır. Sık görülen desen: Drawer + Stack. Drawer ana bölümleri sunar; her bölümün içinde bir Stack ekranlar arası geçiş yapar.

Örnek: Drawer'da "Home" ve "Profile" bölümleri var. Her bölüm bir Stack'tir; Home Stack'i ana sayfa ve detay ekranlarını, Profile Stack'i profil ve düzenleme ekranlarını içerir. Bu desen, uygulamayı düzenli tutar. Drawer üst seviye bölümleri, Stack her bölümün iç akışını yönetir. Navigator'ları iç içe kullanmak, React Navigation'ın güçlü yönlerinden biridir. Kullanıcı bir bölümden diğerine geçtiğinde her bölümün Stack durumu korunur. Bu, karmaşık uygulamaların temelini oluşturur.

Uygulama Drawer + Stack iç içe yaz

Bir HomeStack bileşeni yaz: createNativeStackNavigator'ı @react-navigation/native-stack'ten içe aktar, Stack'e ata. <Stack.Navigator><Stack.Screen name="Home" component={HomeScreen} /></Stack.Navigator> döndürsün. createDrawerNavigator'ı içe aktar, Drawer'a ata. App bileşeninde <Drawer.Navigator><Drawer.Screen name="Home" component={HomeStack} /></Drawer.Navigator> döndür. HomeScreen basit bir bileşen olsun.

Örnek çözümü göster

import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Text } from "react-native";

const Stack = createNativeStackNavigator();
const Drawer = createDrawerNavigator();

function HomeScreen() { return <Text>Ana sayfa</Text>; }

function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeStack} />
    </Drawer.Navigator>
  );
}

İç içe navigator'lar neden?

İç içe navigator kullanmak, uygulamayı düzenli tutar. Drawer ile ana bölümleri ayırırsın; her bölüm kendi Stack'ini taşır. Bu, kullanıcı deneyimini de iyileştirir: kullanıcı bir bölümün içinde gezinirken Stack durumu korunur; başka bölüme geçince geri döndüğünde aynı yerden devam eder.

Örnek: Home Stack'te detay ekranına gittin, sonra Drawer'dan Profile bölümüne geçtin. Profile'da geri dönüp Home'a geldiğinde, Home Stack hâlâ detay ekranındadır. Bu, iç içe navigator'ların sunduğu bir avantajdır. Drawer'ın üstünde başlık çubuğu, hamburger ikonu otomatik görünür. Bu tüm bölümlerde tutarlıdır. İç içe navigator'lar, profesyonel React Native uygulamalarının temelini oluşturur. Bu desen, kullanıcı deneyimini pürüzsüz kılar.

Kendini test et

İç içe navigator'u render et

<Drawer.Navigator>
  <Drawer.Screen name="Home" component={____} />
</Drawer.Navigator>

Cevabı göster

<Drawer.Navigator>
  <Drawer.Screen name="Home" component={HomeStack} />
</Drawer.Navigator>

Kavramı rolüne eşle

Drawer

Ana bölümler
Stack

Bölüm içi akış
Nested

İç içe
HomeStack

Stack bileşeni
İç içe navigasyonda Drawer'ın rolü nedir?
```
<Drawer.Navigator>...</Drawer.Navigator>
```
- Ana bölümleri sunar; her bölüm kendi Stack'ini taşır
- Bölüm içi geçişleri yönetir
- Skoru hesaplar
- Form doğrular
Cevabı göster

Ana bölümleri sunar; her bölüm kendi Stack'ini taşır — Drawer ana bölümleri sunar; her bölüm kendi Stack'ini taşır.

Sıradaki ders: Özet - Drawer navigasyonu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler