Görev tamamlama
- React Native kursu
- Başlangıç
- Ders 51/116
- 6 dk
Tamamlama toggle'ı eklersin.
Görev tamamlama
Şimdi görevleri tamamlama özelliğini ekleyeceğiz. Bir görev dokunulduğunda done alanı true olur ve üzeri çizilir. toggleTask işlevi bir id alır, tasks dizisinde eşleşen görevin done alanını tersler. .map() ile dizi yeniden oluşturulur.
Örnek: const toggleTask = (id) => setTasks(tasks.map((t) => t.id === id ? { ...t, done: !t.done } : t)). Burada üçlü koşul eşleşen görevin done'ını tersler, diğerlerini olduğu gibi bırakır. Daha sonra renderItem içinde TouchableOpacity ile dokunma ve textDecorationLine: 'line-through' ile üzeri çizili görünüm eklenir.
Uygulama Toggle ekle
İki değişiklik yap. (1) addTask altına toggleTask işlevini ekle: const toggleTask = (id) => setTasks(tasks.map((t) => t.id === id ? { ...t, done: !t.done } : t)). (2) renderItem'i güncelle: <TouchableOpacity onPress={() => toggleTask(item.id)}><Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>{item.text}</Text></TouchableOpacity>.
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('');
};
// toggleTask işlevini buraya ekle
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 }
});Örnek çözüm
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>
<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 }
});Üzeri çizili görünüm
Tamamlanan görevlerin üzeri çizilir; bu görsel ipucu kullanıcıya görevin bittiğini gösterir. React Native'de bunun için textDecorationLine: 'line-through' kullanılır. item.done doğruyken çizgi çıkar, yanlışken 'none' ile çizgi kalkar.
Örnek: <Text style={{ textDecorationLine: item.done ? 'line-through' : 'none' }}>{item.text}</Text>. Burada üçlü koşul metne dinamik stil verir. Bu kalıp React Native'in bildirsel (declarative) yapısına uyar: stiller state'e bağlıdır, state değişince görünüm otomatik güncellenir.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Alanı anlamına eşle
| Kavram | Anlamı |
|---|---|
id |
Benzersiz anahtar |
text |
Görev metni |
done |
Tamamlanma durumu |
toggleTask |
Done'ı tersler |
2 toggleTask ne yapar?
const toggleTask = (id) =>
setTasks(tasks.map((t) =>
t.id === id ? { ...t, done: !t.done } : t
));- Görevi diziden siler
- Eşleşen görevin done'ını tersler Doğru cevap
- Yeni görev ekler
- Tüm görevleri tamamlar
Açıklama: toggleTask eşleşen görevin done alanını tersler.
3 toggleTask gövdesini yaz
const toggleTask = (id) => setTasks(tasks.map((t) => t.id === id ? { ...t,____: !t.done } : t));const toggleTask = (id) => setTasks(tasks.map((t) => t.id === id ? { ...t,done: !t.done } : t));Açıklama: done alanı terslenir; göreve tamamlanma durumu değişir.