Özet - Navigasyon
- React Native kursu
- Başlangıç
- Ders 93/116
- 5 dk
Stack, navigate ve params'ı birleştirerek bir iki ekranlı uygulama yazarsın.
Özet - Navigasyon
Bu grupta React Navigation'ın temellerini öğrendin. NavigationContainer kök sarmalayıcıdır; createNativeStackNavigator ile bir Stack oluşturursun. Stack.Navigator içine Stack.Screen bileşenleri koyarsın.
Geçiş için navigation.navigate('EkranAdi', params) kullanırsın. Hedef ekranda route.params ile veriyi okursun. Geri dönmek için navigation.goBack() çağırırsın. Şimdi tüm bunları bir araya getiren bir mini uygulama yazalım.
Uygulama Sıra sende: params'lı geçiş
HomeScreen'de bir Button ekle. Butona basıldığında navigation.navigate('Details', { itemNo: 7 }) çağrılsın.
Başlangıç kodu
function HomeScreen({ navigation }) {
return (
<View>
<Text>Ana sayfa</Text>
{/* params ile geçiş butonu */}
</View>
);
}Örnek çözüm
function HomeScreen({ navigation }) {
return (
<View>
<Text>Ana sayfa</Text>
<Button
title="Ürün 7"
onPress={() => navigation.navigate('Details', { itemNo: 7 })}
/>
</View>
);
}Uygulama Sıra sende: Details'a geri düğmesi ekle
DetailsScreen bileşeni route ve navigation prop'larını alsın. route.params'tan itemNo'yu destructuring et. Bir Text ile göster ve bir Button ile navigation.goBack() çağır.
Başlangıç kodu
function DetailsScreen({ route, navigation }) {
// itemNo değerini params'tan al
return (
<View>
{/* itemNo'yu göster ve geri düğmesi ekle */}
</View>
);
}Örnek çözüm
function DetailsScreen({ route, navigation }) {
const { itemNo } = route.params;
return (
<View>
<Text>Ürün no: {itemNo}</Text>
<Button title="Geri" onPress={() => navigation.goBack()} />
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Details ekranına itemNo geçmek için doğru sözdizimi hangisi?
- navigate('Details', [7])
- navigate('Details', 'itemNo')
- navigate('Details', itemNo: 7)
- navigate('Details', { itemNo: 7 }) Doğru cevap
Açıklama: params bir nesne olarak { itemNo: 7 } geçilir.
2 Eşleştir: kavram ve kullanım
| Kavram | Anlamı |
|---|---|
NavigationContainer |
kök sarmalayıcı |
navigate |
ekran açma |
goBack |
geri dönme |