renderItem

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.

Örnek çözümü göster

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()}
    />
  );
}

Kendini test et

renderItem parametresini yaz

renderItem={(____) => <Text>{item.name}</Text>}

Cevabı göster

renderItem={({ item }) => <Text>{item.name}</Text>}

renderItem'in parametresindeki item neyi ifade eder?
```
renderItem={({ item }) => <Text>{item}</Text>}
```
- O anki dizi öğesi
- Öğe indeksi
- Listenin tamamı
- Anahtar değeri
Cevabı göster

O anki dizi öğesi — item o anki dizi öğesidir.
Parçayı rolüne eşle

({ item })

Nesne ayırma
item

O anki öğe
renderItem

Her öğeyi çizen işlev
<Text>{item.name}</Text>

Öğe adını gösterir

Sıradaki ders: keyExtractor

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler