Nested navigation
- React Native kursu
- Orta seviye
- Ders 57/116
- 5 dk
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.
Başlangıç kodu
// yerel stack navigatorunu ve yan menü navigatorunu içe aktar
// Stack ve Drawer'a ata
// Text'i react-native'den içe aktar
// HomeScreen yaz (bir Text döndürsün)
// HomeStack yaz: Stack.Navigator içinde Stack.Screen olsun
// App yaz: Drawer.Navigator içinde HomeStack'i gösteren bir Drawer.Screen olsunÖrnek çözüm
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.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 İç içe navigator'u render et
<Drawer.Navigator>
<Drawer.Screen name="Home" component={____} />
</Drawer.Navigator><Drawer.Navigator>
<Drawer.Screen name="Home" component={HomeStack} />
</Drawer.Navigator>Açıklama: HomeStack bir Stack navigator bileşenidir; Drawer.Screen'in component'ine verilir.
2 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
Drawer |
Ana bölümler |
Stack |
Bölüm içi akış |
Nested |
İç içe |
HomeStack |
Stack bileşeni |
3 İç 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 Doğru cevap
- Bölüm içi geçişleri yönetir
- Skoru hesaplar
- Form doğrular
Açıklama: Drawer ana bölümleri sunar; her bölüm kendi Stack'ini taşır.