使用AI写一个APP - 完整开发指南

// App.js - 主组件 import React, { useState } from 'react'; import { View, Text, TextInput, TouchableOpacity, FlatList, StyleSheet, Alert } from 'react-native'; const TodoApp = () => { const [tasks, setTasks] = useState([]); const [inputText, setInputText] = useState(''); const addTask = () => { if (inputText.trim() === '') { Alert.alert('提示', '请输入任务内容'); return; } const newTask = { id: Date.now().toString(), text: inputText, completed: false }; setTasks([...tasks, newTask]); setInputText(''); }; const toggleTask = (id) => { setTasks(tasks.map(task => task.id === id ? { ...task, completed: !task.completed } : task )); }; const deleteTask = (id) => { setTasks(tasks.filter(task => task.id !== id)); }; const renderTask = ({ item }) => ( <View style={styles.taskItem}> <TouchableOpacity style={[styles.taskText, item.completed && styles.completed]} onPress={() => toggleTask(item.id)} > <Text>{item.text}</Text> </TouchableOpacity> <TouchableOpacity style={styles.deleteButton} onPress={() => deleteTask(item.id)} > <Text style={styles.deleteText}>删除</Text> </TouchableOpacity> </View> ); return ( <View style={styles.container}> <Text style={styles.title}>我的待办事项</Text> <View style={styles.inputContainer}> <TextInput style={styles.input} value={inputText} onChangeText={setInputText} placeholder="输入新任务..." onSubmitEditing={addTask} /> <TouchableOpacity style={styles.addButton} onPress={addTask}> <Text style={styles.addButtonText}>添加</Text> </TouchableOpacity> </View> <FlatList data={tasks} renderItem={renderTask} keyExtractor={item => item.id} style={styles.list} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5' }, title: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', marginBottom: 20, color: '#333' }, inputContainer: { flexDirection: 'row', marginBottom: 20 }, input: { flex: 1, borderWidth: 1, borderColor: '#ddd', padding: 12, borderRadius: 8, backgroundColor: 'white' }, addButton: { backgroundColor: '#007AFF', paddingHorizontal: 20, paddingVertical: 12, borderRadius: 8, marginLeft: 10, justifyContent: 'center' }, addButtonText: { color: 'white', fontWeight: 'bold' }, list: { flex: 1 }, taskItem: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', backgroundColor: 'white', padding: 15, marginBottom: 8, borderRadius: 8, elevation: 2 }, taskText: { flex: 1, fontSize: 16 }, completed: { textDecorationLine: 'line-through', color: '#888' }, deleteButton: { backgroundColor: '#FF3B30', paddingHorizontal: 12, paddingVertical: 6, borderRadius: 4 }, deleteText: { color: 'white', fontSize: 12 } }); export default TodoApp;