Лабораторна робота №3
Розробка інтерфейсів засобами React Native
Мета роботи:
Ознайомитися з основними компонентами React Native та розробити мобільний додаток із складнішим інтерфейсом та взаємодією.
Завдання
Розробити мобільний додаток "Менеджер фінансів", який дозволяє користувачам вести облік своїх витрат та доходів.
Функціонал додатка:
-
Додавання операції:
- Поле введення суми.
- Поле вибору категорії (
Picker
). - Перемикач (
Switch
) для вибору типу операції (дохід або витрата). - Кнопка "Додати операцію".
-
Відображення списку операцій:
- Список усіх доданих операцій (
FlatList
). - Колір суми: зелений для доходу, червоний для витрати.
- Видалення операції при довгому натисканні.
- Список усіх доданих операцій (
-
Загальна статистика:
- Відображення загальної суми доходів.
- Відображення загальної суми витрат.
- Баланс (дохід – витрати).
Вимоги до інтерфейсу
Інтерфейс має складатися з трьох основних блоків:
- Форма введення операції (з сумою, категорією, типом та кнопкою "Додати").
- Список операцій (відображення даних, можливість видалення).
- Загальна статистика (дохід, витрати, баланс).
Макет інтерфейсу:
------------------------------
| Менеджер фінансів |
------------------------------
| Сума: [___________] |
| Категорія: [Dropdown] |
| Тип: (Доход | Витрата) |
| [ Додати операцію ] |
------------------------------
| Операції: |
| +100 грн (Зарплата) |
| -50 грн (Їжа) |
| -20 грн (Транспорт) |
------------------------------
| Доходи: 100 грн |
| Витрати: 70 грн |
| Баланс: 30 грн |
------------------------------
- 17 March 2025, 13:31 PM