Özet - Listeler
- React Native kursu
- Başlangıç
- Ders 58/116
- 5 dk
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.
Başlangıç kodu
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' }
];
// FlatList ekle
return null;
}Örnek çözüm
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.
Başlangıç kodu
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'] }
];
// SectionList ekle
return null;
}Örnek çözüm
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()}
/>
);
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hangi prop benzersiz anahtar üretir?
<FlatList
data={students}
renderItem={...}
???={(item) => item.id}
/>- keyExtractor Doğru cevap
- id
- key
- uniqueKey
Açıklama: keyExtractor her öğenin benzersiz anahtarını döndürür.
2 Bileşeni işlevine eşle
| Kavram | Anlamı |
|---|---|
FlatList |
Düz liste |
SectionList |
Bölümlü liste |
keyExtractor |
Benzersiz anahtar |
ListHeaderComponent |
Listenin başı |