Ürün listesi
- React Native kursu
- Orta seviye
- Ders 66/116
- 6 dk
FlatList ile ürün listesi yazarsın.
FlatList ile ürün listesi
Ürünleri ekrana dizmek için FlatList kullanırız. data prop'u products dizisini alır; renderItem her ürünü çizer; keyExtractor her ürünün id'sini anahtar olarak döndürür.
renderItem'in parametresi bir nesnedir; item özelliği o anki üründür. <Text>{item.name} - {item.price}</Text> ile her satırı çizebiliriz.
renderItem
renderItem, her öğe için çağrılan bir işlevdir. ({ item }) => <Text>{item.name}</Text> biçiminde yazılır. Burada item, o anki dizi öğesidir.
İşlevin döndürdüğü JSX, listede bir satır olur. Daha zengin satır için View içine alıp stil verilebilir; ama şimdilik Text yeterli.
Uygulama FlatList ekle
App içine bir <FlatList> ekle. data={products}, keyExtractor={(item) => item.id} ve renderItem={({ item }) => <Text>{item.name} - {item.price}</Text>} olsun.
Başlangıç kodu
import React 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() {
// FlatList ile ürünleri listele
return (
<View>
<Text>Mağaza</Text>
</View>
);
}Örnek çözüm
import React 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() {
return (
<View>
<Text>Mağaza</Text>
<FlatList
data={products}
keyExtractor={(item) => item.id}
renderItem={({ item }) => <Text>{item.name} - {item.price}</Text>}
/>
</View>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 data prop'unu yaz
<FlatList ____={products} keyExtractor={keyExtractor} renderItem={renderItem} /><FlatList data={products} keyExtractor={keyExtractor} renderItem={renderItem} />Açıklama: data prop'u ürünler dizisini alır.
2 keyExtractor ne döndürür?
- Ürün adını
- Benzersiz id Doğru cevap
- Fiyatı
- Dizi indeksi
Açıklama: keyExtractor her ürünün benzersiz id'sini döndürür.
3 FlatList prop'larını eşleştir
| Kavram | Anlamı |
|---|---|
data |
Ürün dizisi |
renderItem |
Satır çizer |
keyExtractor |
Anahtar döndürür |
item |
O anki ürün |