Görev listesi
- React Native kursu
- Başlangıç
- Ders 50/116
- 6 dk
FlatList ile görev listesi yazarsın.
FlatList ile görev listesi
Görevleri ekranda göstermek için FlatList kullanılır. Üç prop alır: data diziyi, renderItem her öğeyi nasıl çizeceğini, keyExtractor her öğenin benzersiz anahtarını döndürür. FlatList yalnızca ekranda görünen öğeleri render eder; binlerce öğe olsa bile akıcı kalır.
Örnek: <FlatList data={tasks} renderItem={({ item }) => <Text>{item.text}</Text>} keyExtractor={(item) => item.id} />. renderItem bir nesne alır; bu nesnenin item özelliği dizideki bir görevdir. keyExtractor ise benzersiz anahtar için item.id'yi döndürür.
Uygulama FlatList ekle
Listeye bir FlatList ekle. data={tasks}, renderItem={({ item }) => <Text>{item.text}</Text>}, keyExtractor={(item) => item.id} olsun. Düğmenin altına koy.
Başlangıç kodu
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
export default function App() {
const [task, setTask] = React.useState('');
const [tasks, setTasks] = React.useState([]);
const addTask = () => {
setTasks([...tasks, { id: Date.now().toString(), text: task, done: false }]);
setTask('');
};
return (
<SafeAreaView style={styles.container}>
<Text>Yapılacaklar</Text>
<TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />
<Button title="Ekle" onPress={addTask} />
{/* görev listesini buraya ekle */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Örnek çözüm
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, FlatList, StyleSheet } from 'react-native';
export default function App() {
const [task, setTask] = React.useState('');
const [tasks, setTasks] = React.useState([]);
const addTask = () => {
setTasks([...tasks, { id: Date.now().toString(), text: task, done: false }]);
setTask('');
};
return (
<SafeAreaView style={styles.container}>
<Text>Yapılacaklar</Text>
<TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />
<Button title="Ekle" onPress={addTask} />
<FlatList
data={tasks}
renderItem={({ item }) => <Text>{item.text}</Text>}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});renderItem deseni
renderItem bir ok fonksiyonudur ve parametre olarak bir nesne alır. Bu nesnenin en sık kullanılan özelliği item'dır; o anki dizi öğesini verir. Yapı: renderItem={({ item }) => ...}. Süslü parantez within süslü parantez JavaScript'te nesne ayırma (destructuring) kalıbıdır.
İçeride dilediğin bileşeni döndürebilirsin: bir Text, bir View ya da bir TouchableOpacity. Örneğin renderItem={({ item }) => <Text>{item.text}</Text>} her görevin metnini gösterir. İleride item.done'ı kullanarak tamamlanan görevlerin üzerini çizeceksin.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 FlatList'te benzersiz anahtar neyle verilir?
<FlatList
data={tasks}
renderItem={...}
???={(item) => item.id}
/>- keyExtractor Doğru cevap
- id
- uniqueKey
- key
Açıklama: keyExtractor her öğenin benzersiz anahtarını döndürür.
2 keyExtractor gövdesini yaz
keyExtractor={(item) =>____}keyExtractor={(item) =>item.id}Açıklama: keyExtractor item.id döndürür; bu benzersizdir.
3 FlatList prop'unu işlevine eşle
| Kavram | Anlamı |
|---|---|
data |
Listelenecek dizi |
renderItem |
Her öğeyi çizen işlev |
keyExtractor |
Benzersiz anahtar üretir |
item |
O anki öğe |