Birleştirme
- React Native kursu
- Başlangıç
- Ders 52/116
- 6 dk
Tüm parçaları birleştirerek çalışan bir yapılacaklar uygulaması yazarsın.
Birleştirme
Son adımda uygulamayı tamamlıyoruz. İki yeni parça eklenecek: bir sayaç ve bir temizle düğmesi. Sayaç, kaç görev olduğunu gösterir; tasks.length ile elde edilir. Temizle düğmesi ise setTasks([]) ile tüm görevleri siler.
Bu küçük eklemeler kullanıcıya genel bir bakış sunar ve hatayla dolan öğeleri temizleme olanağı verir. İki küçük görev seni tam çalışan uygulamaya götürecek. Sonunda ekleme, listeleme, tamamlama ve temizleme özelliklerini bir arada bulunduran gerçek bir yapılacaklar uygulamasına sahip olacaksın.
Uygulama Sayaç ekle
Başlığın altına bir sayaç Text ekle. İçeriği {tasks.length} görev olsun. Yani <Text>{tasks.length} görev</Text> yaz; bunu <Text>Yapılacaklar</Text>'in altına koy.
Başlangıç kodu
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, FlatList, TouchableOpacity, 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('');
};
const toggleTask = (id) => {
setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
};
return (
<SafeAreaView style={styles.container}>
<Text>Yapılacaklar</Text>
{/* sayaç ve temizle düğmesini buraya ekle */}
<TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />
<Button title="Ekle" onPress={addTask} />
<FlatList
data={tasks}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => toggleTask(item.id)}>
<Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>{item.text}</Text>
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Örnek çözüm
<React.Fragment>
<Text>Yapılacaklar</Text>
<Text>{tasks.length} görev</Text>
</React.Fragment>Uygulama Temizle düğmesini ekle
İki değişiklik yap. (1) toggleTask altına const clearAll = () => setTasks([]) ekle. (2) FlatList'in altına <Button title="Temizle" onPress={clearAll} /> ekle.
Başlangıç kodu
import React from 'react';
import { SafeAreaView, View, Text, TextInput, Button, FlatList, TouchableOpacity, 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('');
};
const toggleTask = (id) => {
setTasks(tasks.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
};
// clearAll işlevini buraya ekle
return (
<SafeAreaView style={styles.container}>
<Text>Yapılacaklar</Text>
<Text>{tasks.length} görev</Text>
<TextInput placeholder="Yeni görev" value={task} onChangeText={setTask} />
<Button title="Ekle" onPress={addTask} />
<FlatList
data={tasks}
renderItem={({ item }) => (
<TouchableOpacity onPress={() => toggleTask(item.id)}>
<Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>{item.text}</Text>
</TouchableOpacity>
)}
keyExtractor={(item) => item.id}
/>
{/* temizle düğmesini buraya ekle */}
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 16 }
});Örnek çözüm
const clearAll = () => setTasks([]);
// ve return içinde FlatList'in altında:
<Button title="Temizle" onPress={clearAll} />Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Tüm görevleri silmek için ne yaparsın?
const clearAll = () => ???;- setTasks(tasks)
- setTasks([task])
- setTasks([]) Doğru cevap
- tasks = []
Açıklama: setTasks([]) tasks dizisini boşaltır.
2 İşlevi amacına eşle
| Kavram | Anlamı |
|---|---|
addTask |
Yeni görev ekler |
toggleTask |
Done'ı tersler |
clearAll |
Tümünü siler |
tasks.length |
Görev sayısı |
3 Görev sayısını yaz
<Text>{____} görev</Text><Text>{tasks.length} görev</Text>Açıklama: tasks.length dizideki görev sayısını verir.