Ürün listesi

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.

Örnek çözümü göster

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

Kendini test et

data prop'unu yaz

<FlatList ____={products} keyExtractor={keyExtractor} renderItem={renderItem} />

Cevabı göster

<FlatList data={products} keyExtractor={keyExtractor} renderItem={renderItem} />

keyExtractor ne döndürür?
- Ürün adını
- Benzersiz id
- Fiyatı
- Dizi indeksi
Cevabı göster

Benzersiz id — keyExtractor her ürünün benzersiz id'sini döndürür.
FlatList prop'larını eşleştir

data

Ürün dizisi
renderItem

Satır çizer
keyExtractor

Anahtar döndürür
item

O anki ürün

Sıradaki ders: Ürün detayı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler