Ürün detayı
- React Native kursu
- Orta seviye
- Ders 67/116
- 6 dk
Ürün detay ekranı yazarsın.
Ürün detayı
Listeden bir ürüne dokununca detay ekranı açılır. Seçimi selectedId state'inde tutarız: const [selectedId, setSelectedId] = useState(null). products.find((p) => p.id === selectedId) ile seçili ürünü buluruz.
selected doluysa detayı, boşsa listeyi gösteririz. Bu, ekranlar arası geçişin en basit yoludur; tam navigasyon kütüphanesi gerekmez.
Geri dönüş
Detaydan listeye dönmek için setSelectedId(null) çağrılır. Bu, seçimi temizler ve selected tekrar null olur; böylece liste yeniden görünür.
Bir <Text onPress={() => setSelectedId(null)}>Geri</Text> butonu yeterli. Tam navigasyon kütüphanesi yerine bu basit yöntem, tek ekranda state geçişi için yeterlidir.
Uygulama Detay ekranını ekle
selected doluysa detay göster: if (selected) ile <Text>{selected.name}</Text> ve geri butonu (setSelectedId(null)) döndür. Değilse listeyi göster.
Başlangıç kodu
import React, { useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Kalem', price: 20 },
{ id: '2', name: 'Defter', price: 35 },
]
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
// selected varsa detayı göster, yoksa listeyi
return (
<View>
<Text>Mağaza</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.name}</Text>}
/>
</View>
);
}Örnek çözüm
import React, { useState } from 'react';
import { FlatList, Text, View } from 'react-native';
const products = [
{ id: '1', name: 'Kalem', price: 20 },
{ id: '2', name: 'Defter', price: 35 },
]
export default function App() {
const [selectedId, setSelectedId] = useState(null);
const selected = products.find((p) => p.id === selectedId);
if (selected) {
return (
<View>
<Text>{selected.name}</Text>
<Text onPress={() => setSelectedId(null)}>Geri</Text>
</View>
);
}
return (
<View>
<Text>Mağaza</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => (
<Text onPress={() => setSelectedId(item.id)}>{item.name}</Text>
)}
/>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Detay kavramlarını eşleştir
| Kavram | Anlamı |
|---|---|
selectedId |
Seçilen ürün id |
find |
Ürünü bulur |
selected |
Bulunan ürün |
null |
Seçim yok |
2 selected ne zaman truthy olur?
- Liste boş olduğunda
- selectedId null olduğunda
- Bir ürün bulunduğunda Doğru cevap
- Sepet dolu olduğunda
Açıklama: find bir ürün bulursa selected dolu olur.
3 Geri butonunu yaz
<Text onPress={() => ____(null)}>Geri</Text><Text onPress={() => setSelectedId(null)}>Geri</Text>Açıklama: setSelectedId(null) seçimi temizler.