renderItem
- React Native kursu
- Başlangıç
- Ders 54/116
- 5 dk
renderItem ile her öğeyi render etmeyi öğrenirsin.
renderItem
renderItem her dizi öğesini çizen işlevdir. Parametre olarak bir nesne alır; bu nesnenin item özelliği o anki öğedir. JavaScript'te bu kalıba nesne ayırma (destructuring) denir: ({ item }).
İşlevin içeriği serbesttir; tek bir Text döndürebileceğin gibi, bir View içinde birden çok bileşen de döndürebilirsin. Örneğin renk listesinde her öğe için <View style={{ backgroundColor: item.color }}><Text>{item.name}</Text></View> yazabilirsin. item her zaman o anki dizi öğesidir; tipi neyse o.
Özel renderItem
renderItem içine dilediğin JSX'i yazabilirsin. Renk listesinde her öğe için bir View + Text kombinasyonu kullanırsan hem arka plan rengini hem adı gösterirsin. Önemli olan item'ın doğru alanına başvurmaktır.
Örneğin colors = [{ name: 'Tomato', color: 'tomato' }, { name: 'Sky', color: 'skyblue' }] dizisinde her nesnenin name ve color alanları vardır. renderItem={({ item }) => <View style={{ backgroundColor: item.color, padding: 12 }}><Text>{item.name}</Text></View>} her renk için stilli bir kart çizer.
Uygulama Renk listesi yaz
Boş bileşeni tamamla. colors dizisi tanımlı: her nesnenin name ve color alanları var. <FlatList data={colors} renderItem={({ item }) => <View style={{ backgroundColor: item.color, padding: 12 }}><Text>{item.name}</Text></View>} keyExtractor={(item, index) => index.toString()} /> döndür.
Başlangıç kodu
import React from 'react';
import { FlatList, View, Text } from 'react-native';
export default function ColorList() {
const colors = [
{ name: 'Domates', color: 'tomato' },
{ name: 'Gökyüzü', color: 'skyblue' }
];
// FlatList ekle
return null;
}Örnek çözüm
import React from 'react';
import { FlatList, View, Text } from 'react-native';
export default function ColorList() {
const colors = [
{ name: 'Domates', color: 'tomato' },
{ name: 'Gökyüzü', color: 'skyblue' }
];
return (
<FlatList
data={colors}
renderItem={({ item }) => (
<View style={{ backgroundColor: item.color, padding: 12 }}>
<Text>{item.name}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 renderItem parametresini yaz
renderItem={(____) => <Text>{item.name}</Text>}renderItem={({ item }) => <Text>{item.name}</Text>}Açıklama: { item } ile nesne ayırma yapılır.
2 renderItem'in parametresindeki item neyi ifade eder?
renderItem={({ item }) => <Text>{item}</Text>}- O anki dizi öğesi Doğru cevap
- Öğe indeksi
- Listenin tamamı
- Anahtar değeri
Açıklama: item o anki dizi öğesidir.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
({ item }) |
Nesne ayırma |
item |
O anki öğe |
renderItem |
Her öğeyi çizen işlev |
<Text>{item.name}</Text> |
Öğe adını gösterir |