Зачем нужна навигация в мобильных приложениях — виды навигации, отличие от веба

Понимание навигации в мобильных приложениях

Представьте, что мобильное приложение — это как большой торговый центр. У него есть различные залы (экраны), каждый из которых предлагает уникальный набор возможностей: просмотр товаров, корзина, профиль пользователя и так далее. Вот только если нет навигации, пользователи будут бежать от вашего приложения быстрее, чем вы успеете сказать "React Navigation". Навигация помогает:

• Переключаться между экранами, сохраняя состояние приложения.
• Управлять историей переходов (например, "Назад" в браузере, но в мобильном стиле).
• Передавать данные между экранами (например, чтобы передать ID товара из списка в детальную карточку).

Какие задачи решает навигация?

1. Логическая структура приложения. Например, на экране "Список пользователей" можно тапнуть на профиль, чтобы перейти к "Детальному описанию пользователя". Вам нужна связь между этими экранами.
2. Удобство пользователя. Никто не хочет, чтобы приложения выглядели, как лабиринт. Навигация упрощает путешествие пользователя.
3. Управление состояниями. В мобильных приложениях нужно учитывать историю переходов, чтобы, например, вернуться на предыдущий экран без потери данных.

Виды навигации в мобильных приложениях

Stack Navigation

Давайте начнём с классики. Stack Navigation работает, как стопка бумаг на вашем столе — последний лист (экран), который вы положили поверх остальных, становится видимым. Когда вы "возвращаетесь" на предыдущее состояние, верхний лист убирается, и вы снова видите нижний.

Используется для:

• Иерархической структуры навигации (например, переходы "Главная > Детали > Подробности").

Пример сценария:

Главный экран -> Экран с постами -> Экран с деталями поста

Bottom Tab Navigation

Это нижнее меню, которое вы видите почти в каждом современном мобильном приложении. Например, в Instagram — вкладки "Домой", "Поиск", "Добавить", "Сообщения", "Профиль". Оно позволяет переключаться между несколькими основными разделами приложения.

Используется для:

• Быстрого доступа к ключевым функциям приложения.

Drawer Navigation

Drawer Navigation (или боковая панель) вызывает ностальгию по те временам, когда меню былo чем-то спрятанным. Это скрытая боковая панель, которая открывается свайпом или нажатием на иконку. Выглядит чаще всего как "гамбургер-меню" (да, тот самый значок из трёх полосок).

Используется для:

• Меньшего количества часто используемых разделов (например, "Настройки" или "О приложении"), которые не требуют постоянного внимания.

Отличия навигации в мобильных приложениях от веб-навигации

Вы можете задаться вопросом: "А что, навигация в мобильных приложениях так уж отличается от привычного роутинга в React на вебе?" О, давайте копнем чуть глубже.

Управление стэком экранов

В вебе каждая новая страница создаёт новую запись в истории браузера. В мобильных приложениях мы управляем стэковым механизмом экранов. По сути, это как "undo" и "redo", только для переходов между экранами. Вы можете "положить экран на стэк", "убрать экран" или даже "заменить текущий экран". Например:

• Если вы "ложите" экран на стэк, пользователь может вернуться с помощью кнопки "Назад".
• Если вы "заменяете" текущий экран, возвращаться уже некуда.

Сохранение состояний

В мобильных приложениях состояние интерфейса важно сохранять при переходе между экранами. Например, вы листаете ленту новостей, кликаете на статью, читаете её, а потом возвращаетесь... и продолжаете листать с того самого места, где остановились! На вебе это работает немного иначе, потому что страница перезагружается.

Параметры без URL

Если в вебе вы передаёте параметры через URL-строку /page?id=123, то в мобильных приложениях параметры передаются программным путём через объекты. Например, если вы хотите передать данные о пользователе с одного экрана на другой, вы делаете это через API навигации, а не через URL.

Пример сценария

Чтобы лучше понять, как это работает, представим следующее:

1. У нас есть приложение с тремя экранами: "Домашний экран", "Детальный экран" и "Настройки".
2. Пользователь переходит последовательно: Домашний экран → Детальный экран → Настройки.
3. В структуре стэка это выглядит так:

   [Домашний экран] -> [Детальный экран] -> [Настройки]
   

4. Теперь пользователь нажимает "Назад". Что происходит:

   [Детальный экран] -> [Домашний экран]
   

2

Задача

Модуль 3: React, 22 уровень, 0 лекция

Недоступна

Счетчик нажатий

Счетчик нажатий

Открыть