params
- React Native kursu
- Başlangıç
- Ders 91/116
- 5 dk
params ile ekranlar arası veri geçmeyi öğrenirsin.
params ile veri geçirme
Bir ekrana geçerken veri taşımak için navigate'in ikinci parametresi olarak bir nesne verirsin: navigation.navigate('Details', { itemId: 42 }). Bu nesne, hedef ekranın route.params özelliğinden okunur.
Hedef ekranda parametreleri destructuring ile çıkarırsın: const { itemId } = route.params;. Parametre yoksa uygulama çökebilir; bu yüzden route.params?.itemId veya varsayılan değer kullanmak güvenlidir. route prop'unu da bileşen parametresinden alman gerekir.
Uygulama Sıra sende: params'ı oku ve göster
DetailsScreen bileşeni route prop'unu alsın. route.params içinden itemId'yi destructuring et ve bir <Text> içinde göster.
Başlangıç kodu
function DetailsScreen({ route }) {
// parametreyi params'tan al
return (
<View>
{/* parametreyi Text içinde göster */}
</View>
);
}Örnek çözüm
function DetailsScreen({ route }) {
const { itemId } = route.params;
return (
<View>
<Text>Ürün no: {itemId}</Text>
</View>
);
}Varsayılan params
Bazen bir ekran params olmadan da açılabilir. Bu durumda route.params undefined olur ve doğrudan destructuring yapmak uygulamayı çökertir. Güvenli yol: const { itemId = 0 } = route.params ?? {}; yazmaktır.
Burada ?? {} ile params yoksa boş nesne kullanılır; = 0 ile itemId yoksa varsayılan değer verilir. Böylece uygulaman her koşulda çalışır. Bu desen, opsiyonel parametreli ekranlarda standarttır.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Boşluğu doldur: params'ı destructuring et
const { itemId } = route.____;const { itemId } = route.params;Açıklama: Geçilen parametreler route.params içinde olur.
2 Details ekranına itemId geçirmek için nasıl yazılır?
navigation.navigate('Details', ?)- navigation.navigate('Details', 'itemId: 42')
- navigation.navigate('Details', { itemId: 42 }) Doğru cevap
- navigation.navigate('Details', (itemId) => 42)
- navigation.navigate('Details', [42])
Açıklama: params bir nesne olarak geçilir.
3 Eşleştir: kavram ve açıklama
| Kavram | Anlamı |
|---|---|
route.params |
geçilen veri |
navigate |
ekran açma |
itemId |
parametre anahtarı |