Лабораторна робота №3


Розробка інтерфейсів засобами React Native

Мета роботи:

Ознайомитися з основними компонентами React Native та розробити мобільний додаток із складнішим інтерфейсом та взаємодією.


Завдання

Розробити мобільний додаток "Менеджер фінансів", який дозволяє користувачам вести облік своїх витрат та доходів.

Функціонал додатка:

  1. Додавання операції:

    • Поле введення суми.
    • Поле вибору категорії (Picker).
    • Перемикач (Switch) для вибору типу операції (дохід або витрата).
    • Кнопка "Додати операцію".
  2. Відображення списку операцій:

    • Список усіх доданих операцій (FlatList).
    • Колір суми: зелений для доходу, червоний для витрати.
    • Видалення операції при довгому натисканні.
  3. Загальна статистика:

    • Відображення загальної суми доходів.
    • Відображення загальної суми витрат.
    • Баланс (дохід – витрати).

Вимоги до інтерфейсу

Інтерфейс має складатися з трьох основних блоків:

  1. Форма введення операції (з сумою, категорією, типом та кнопкою "Додати").
  2. Список операцій (відображення даних, можливість видалення).
  3. Загальна статистика (дохід, витрати, баланс).

Макет інтерфейсу:

------------------------------
|         Менеджер фінансів  |
------------------------------
| Сума:       [___________]  |
| Категорія:  [Dropdown]     |
| Тип:        (Доход | Витрата)  |
| [ Додати операцію ]        |
------------------------------
| Операції:                  |
| +100 грн  (Зарплата)       |
| -50 грн   (Їжа)            |
| -20 грн   (Транспорт)      |
------------------------------
| Доходи: 100 грн            |
| Витрати: 70 грн            |
| Баланс: 30 грн             |
------------------------------