Geri butonu
- React Native kursu
- Başlangıç
- Ders 92/116
- 5 dk
Geri butonu ve goBack'i öğrenirsin.
goBack fonksiyonu
Bir ekrandan öncekine dönmek için navigation.goBack() çağrısı yaparsın. Bu, yığının en üstündeki ekranı çıkarır ve altındaki ekranı gösterir. Stack navigator'da geri düğmesi genellikle başlık çubuğunda otomatik görünür.
Bazen kendi geri düğmeni koymak istersin. O zaman bir Button ekleyip onPress olayında navigation.goBack() çağırırsın. goBack parametre almaz; her zaman bir üst ekranı çıkarır. Yığında geriye gidecek ekran yoksa hiçbir şey yapmaz.
Android donanım geri tuşu
Android cihazlarda fiziksel veya yazılımsal bir geri tuşu bulunur. Stack navigator bu tuşu otomatik yakalar ve goBack davranışını uygular; yani ekstra kod yazmana gerek kalmaz. Kullanıcı geri tuşuna bastığında bir üst ekran açılır.
Eğer geri tuşunda özel bir işlem yapman gerekiyorsa (örneğin kaydedilmemiş veri varsa uyarı göstermek), useFocusEffect veya BackHandler ile tuş davranışını özelleştirebilirsin. Başlangıç seviyesinde varsayılan davranış çoğu durumda yeterlidir.
Uygulama Sıra sende: geri düğmesi ekle
DetailsScreen bileşenine bir Button ekle. Butona basıldığında navigation.goBack() çağrılsın. navigation prop'unu bileşen parametresinden al.
Başlangıç kodu
function DetailsScreen({ navigation }) {
return (
<View>
<Text>Detay ekranı</Text>
{/* geri düğmesi ekle */}
</View>
);
}Örnek çözüm
function DetailsScreen({ navigation }) {
return (
<View>
<Text>Detay ekranı</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 Eşleştir: işlev ve etkisi
| Kavram | Anlamı |
|---|---|
goBack |
üst ekranı çıkarır |
navigate |
yeni ekran ekler |
popToTop |
en başa döner |
2 navigation.goBack() ne yapar?
navigation.goBack()- Uygulamayı yeniden başlatır
- Yeni ekran ekler
- Yığının üstündeki ekranı çıkarır Doğru cevap
- Tüm params'ı siler
Açıklama: goBack üst ekranı çıkarır ve öncekine döner.
3 Boşluğu doldur: geri dön
navigation.____();navigation.goBack();Açıklama: goBack ile önceki ekrana dönersin.