Görev listesi

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.

Örnek çözümü göster

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.

Kendini test et

FlatList'te benzersiz anahtar neyle verilir?
```
<FlatList
  data={tasks}
  renderItem={...}
  ???={(item) => item.id}
/>
```
- keyExtractor
- id
- uniqueKey
- key
Cevabı göster

keyExtractor — keyExtractor her öğenin benzersiz anahtarını döndürür.

keyExtractor gövdesini yaz

keyExtractor={(item) =>____}

Cevabı göster

keyExtractor={(item) =>item.id}

FlatList prop'unu işlevine eşle

data

Listelenecek dizi
renderItem

Her öğeyi çizen işlev
keyExtractor

Benzersiz anahtar üretir
item

O anki öğe

Sıradaki ders: Görev tamamlama

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler