navigate
- React Native kursu
- Başlangıç
- Ders 90/116
- 5 dk
navigation.navigate ile geçiş yapmayı öğrenirsin.
navigate fonksiyonu
Bir ekrandan diğerine geçmek için navigation.navigate('EkranAdi') çağrısı yaparsın. Bu, hedef ekranı yığının üstüne ekler. navigation nesnesi, stack içindeki her ekran bileşenine otomatik olarak props olarak geçirilir.
Bir Button veya Pressable bileşeninin onPress olayında navigate çağırarak geçişi tetiklersin. Örneğin: onPress={() => navigation.navigate('Details')}. Hedef ekran adı, Stack.Screen'in name özniteliğiyle birebir eşleşmelidir.
Uygulama Sıra sende: Details'a geç butonu ekle
HomeScreen bileşenine bir Button ekle. Butona basıldığında navigation.navigate('Details') çağrılsın. navigation prop'unu bileşen parametrelerinden al.
Başlangıç kodu
function HomeScreen({ navigation }) {
return (
<View>
<Text>Ana sayfa</Text>
{/* geçiş butonu ekle */}
</View>
);
}Örnek çözüm
function HomeScreen({ navigation }) {
return (
<View>
<Text>Ana sayfa</Text>
<Button
title="Detaylar"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}navigation prop
Stack içindeki her ekran bileşeni, otomatik olarak bir navigation prop'u alır. Bu prop, navigate, goBack, setParams gibi işlevler içerir. Bileşen parametresinden destructuring ile çıkarabilirsin: function HomeScreen({ navigation }).
Eğer ekranın route bilgisi de gerekiyorsa (örneğin geçilen parametreleri okumak için), ikisini birlikte alabilirsin: function Screen({ navigation, route }). Bu iki prop React Navigation tarafından otomatik enjekte edilir; manuel olarak geçirmezsin.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 navigation.navigate('Details') ne yapar?
navigation.navigate('Details')- Details ekranını yığının üstüne ekler Doğru cevap
- Uygulamayı kapatır
- Details ekranını yığından çıkarır
- Tüm ekranları siler
Açıklama: navigate hedef ekranı yığının üstüne ekler.
2 Boşluğu doldur: Details'a geç
navigation.____('Details');navigation.navigate('Details');Açıklama: navigate ile hedef ekrana geçersin.
3 Eşleştir: işlev ve etkisi
| Kavram | Anlamı |
|---|---|
navigate |
yeni ekran ekler |
goBack |
önceki ekrana döner |
setParams |
parametre günceller |