React Native
Görev tamamlama
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>.
Örnek çözümü göster
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.
Kendini test et
-
Alanı anlamına eşle
- id
- Benzersiz anahtar
- text
- Görev metni
- done
- Tamamlanma durumu
- toggleTask
- Done'ı tersler
-
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
- Yeni görev ekler
- Tüm görevleri tamamlar
Cevabı göster
Eşleşen görevin done'ını tersler — toggleTask eşleşen görevin done alanını tersler.
-
toggleTask gövdesini yaz
const toggleTask = (id) => setTasks(tasks.map((t) => t.id === id ? { ...t,____: !t.done } : t));
Cevabı göster
const toggleTask = (id) => setTasks(tasks.map((t) => t.id === id ? { ...t,done: !t.done } : t));
Sıradaki ders: Birleştirme
