Stack navigator
- React Native kursu
- Başlangıç
- Ders 89/116
- 5 dk
Stack navigator ile sayfa geçişini öğrenirsin.
Stack navigator
Stack navigator, ekranları bir kart yığını gibi yönetir. Yeni ekran açıldığında yığının üstüne eklenir; geri basıldığında üstteki ekran yığından çıkar. Bu, mobil uygulamalardaki en yaygın navigasyon modelidir.
Bir stack oluşturmak için createNativeStackNavigator işlevini çağırırsın. Bu, iki bileşen döndürür: Stack.Navigator (sarmalayıcı) ve Stack.Screen (her ekran için). Stack.Navigator içine birden fazla Stack.Screen yerleştirirsin.
Navigator ve Screen
Stack.Navigator bileşeni, tüm ekranların sarmalayıcısıdır. İçine her ekran için bir Stack.Screen koyarsın. Her Stack.Screen, name (ekran adı) ve component (bileşen) öznitelikleri alır.
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>İlk listelenen ekran, uygulama açıldığında gösterilen başlangıç ekranıdır. name değeri, navigate çağrılarında kullanacağın dize anahtarıdır.
Uygulama Sıra sende: iki ekranlı stack oluştur
createNativeStackNavigator'ı içe aktar ve Stack değişkenine ata. Stack.Navigator içine Home ve Details adlarında iki Stack.Screen ekle.
Başlangıç kodu
// stack oluşturucuyu içe aktar
// Stack değişkenine ata
// Navigator içine iki Screen ekleÖrnek çözüm
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function App() {
return (
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: Stack oluştur
const Stack = ____();const Stack = createNativeStackNavigator();Açıklama: createNativeStackNavigator çağrılır.
2 Stack.Screen bileşeninin zorunlu öznitelikleri nelerdir?
<Stack.Screen name="Home" component={HomeScreen} />- style ve theme
- route ve params
- title ve color
- name ve component Doğru cevap
Açıklama: name ekranın adını, component ise gösterilecek bileşeni belirler.
3 Eşleştir: bileşen ve görev
| Kavram | Anlamı |
|---|---|
Stack.Navigator |
ekran sarmalayıcı |
Stack.Screen |
tek bir ekran |
NavigationContainer |
kök sarmalayıcı |