Лаб5
.docxМинистерство цифрового развития, связи и массовых коммуникаций РФ
ордена Трудового Красного Знамени федеральное государственное
бюджетное образовательное учреждение высшего образования
«МОСКОВСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ СВЯЗИ И
ИНФОРМАТИКИ»
Кафедра «МКиИТ»
Лабораторная № 5
по дисциплине «Разработка кроссплатформенного программного обеспечения»
Создание ToDo приложения
Выполнил:
студент группы БФИ2203
Мячина Л. А.
Проверил:
Потапченко Т. Д.
Москва, 2024 г.
Цель работы:
Научиться основам работы с React Native, а также создать простое ToDo-приложение с возможностью добавления, редактирования и удаления задач.
Требования к работе:
Задание 1: Добавьте возможность редактирования задачи.
Задание 2: Реализуйте возможность пометить задачу как выполненную.
Задание 3: Используйте локальное хранилище (AsyncStorage) для сохранения задач между перезагрузками приложения.
Выполнение работы:
Листинг кода
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, SafeAreaView, Text, View } from 'react-native';
import HomeScreen from './src/screens/HomeScreen';
export default function App() {
return (
<SafeAreaView style={styles.container}>
<HomeScreen />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
import React, { useState, useEffect } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';
import TodoList from '../components/TodoList';
import AsyncStorage from '@react-native-async-storage/async-storage';
const HomeScreen = () => {
const [text, setText] = useState('');
const [todos, setTodos] = useState([]);
useEffect(() => {
loadTodos();
}, []);
useEffect(() => {
saveTodos();
}, [todos]);
const addTodo = () => {
if (text.trim()) {
setTodos([...todos, { id: Date.now(), text, completed: false }]);
setText('');
}
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
const changeTodo = (id, newText, status) => {
const updatedTodos = todos.map(todo =>
todo.id === id ? { ...todo, text: newText, completed: status } : todo
);
setTodos(updatedTodos);
};
const saveTodos = async () => {
try {
await AsyncStorage.setItem('todos', JSON.stringify(todos));
} catch (error) {
console.log('Ошибка при сохранении задач', error);
}
};
const loadTodos = async () => {
try {
const storedTodos = await AsyncStorage.getItem('todos');
if (storedTodos) {
setTodos(JSON.parse(storedTodos));
}
} catch (error) {
console.log('Ошибка при загрузке задач', error);
}
};
return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Введите задачу"
value={text}
onChangeText={setText}
/>
<Button title="Добавить" onPress={addTodo} />
<TodoList todos={todos} onDelete={deleteTodo} onChange={changeTodo} />
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
width: "70%",
maxWidth: "1000px",
},
input: {
padding: 10,
borderColor: '#ccc',
borderWidth: 1,
borderRadius: 5,
marginBottom: 10,
},
});
export default HomeScreen;
Результат работы
Рисунок 1 – Результат работы
Вывод
С помощью полученных знаний, мы научились основам работы с React Native, а также создали простое ToDo-приложение с возможностью добавления, редактирования и удаления задач.