Özet - Listeler

FlatList, renderItem ve keyExtractor'ı birleştirerek bir öğrenci listesi yazarsın.

Özet - Listeler

Bu grupta beş şey öğrendin. FlatList uzun listeleri verimli gösterir. renderItem her öğeyi çizen işlevdir. keyExtractor her öğeye benzersiz anahtar verir. SectionList bölümlere ayrılmış listeleri gösterir. ListHeaderComponent ve ListFooterComponent başa ve sona sabit bileşen koyar.

Şimdi bunları birleştirip iki küçük görev yapacaksın: önce bir öğrenci listesi FlatList ile, sonra bir sınıf listesi SectionList ile. İki görev seni listelerin tamamına götürecek.

Uygulama Öğrenci listesi yaz

Boş bileşeni tamamla. students dizisi tanımlı: her nesnenin id ve name alanları var. <FlatList data={students} renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.id} /> döndür.

Örnek çözümü göster

import React from 'react';
import { FlatList, Text } from 'react-native';

export default function StudentList() {
  const students = [
    { id: 's1', name: 'Ayşe' },
    { id: 's2', name: 'Ali' }
  ];
  return (
    <FlatList
      data={students}
      renderItem={({ item }) => <Text>{item.name}</Text>}
      keyExtractor={(item) => item.id}
    />
  );
}

Uygulama Sınıf listesi yaz

Boş bileşeni tamamla. classes dizisi tanımlı: iki sınıf bölümü var. <SectionList sections={classes} renderItem={({ item }) => <Text>{item}</Text>} renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>} keyExtractor={(item, index) => index.toString()} /> döndür.

Örnek çözümü göster

import React from 'react';
import { SectionList, Text } from 'react-native';

export default function ClassList() {
  const classes = [
    { title: '9-A', data: ['Ayşe', 'Ali'] },
    { title: '9-B', data: ['Berk', 'Can'] }
  ];
  return (
    <SectionList
      sections={classes}
      renderItem={({ item }) => <Text>{item}</Text>}
      renderSectionHeader={({ section }) => <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>}
      keyExtractor={(item, index) => index.toString()}
    />
  );
}

Kendini test et

Hangi prop benzersiz anahtar üretir?
```
<FlatList
  data={students}
  renderItem={...}
  ???={(item) => item.id}
/>
```
- keyExtractor
- id
- key
- uniqueKey
Cevabı göster

keyExtractor — keyExtractor her öğenin benzersiz anahtarını döndürür.
Bileşeni işlevine eşle

FlatList

Düz liste
SectionList

Bölümlü liste
keyExtractor

Benzersiz anahtar
ListHeaderComponent

Listenin başı

Sıradaki ders: ScrollView

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler