Назад в блог

Навигация в React Native: stack, tabs и auth flow

Как проектировать навигацию без хаоса: базовая структура stack и tabs, вложенные маршруты, protected screens и ошибки, которые дорого чинить позже.

Почему навигация быстро становится архитектурной проблемой

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

Базовая схема, которая работает

Для большинства приложений достаточно трёх слоёв:

  • root navigator для auth и app shell;
  • stack для последовательных сценариев;
  • tabs для основных разделов продукта.

Такой каркас помогает изолировать логику входа, держать понятные переходы и не дублировать маршруты.

Где чаще всего ошибаются

Типичные проблемы:

  • tabs создают слишком рано и тащат в них всё приложение;
  • auth state смешивают с экранной навигацией;
  • deep links не учитывают при проектировании маршрутов;
  • названия экранов и params растут без общего контракта.

Практический подход

Сначала опишите пользовательские сценарии, потом сгруппируйте экраны по потокам, и только после этого собирайте navigator tree. Если flow нельзя объяснить на одной схеме, в коде он тоже будет хрупким.

Хорошая навигация ощущается не как фреймворк, а как спокойный путь пользователя по продукту.

Практический разбор: Навигация в React Native

Главная ошибка в этой теме — читать её как справку, а не как рабочий сценарий. Попробуйте сразу привязать материал к маленькой задаче: один экран, одно состояние, один понятный результат. Тогда статья превращается не в теорию, а в план действия.

Слабый подходПрактичный подход
“Разберусь потом, когда начну проект”“Соберу маленький пример и проверю два edge case”
“Повторю код из статьи”“Изменю условие и посмотрю, понимаю ли решение”
“Главное, чтобы заработало один раз”“Проверю loading, error, empty state или неверный ввод”

Мини-чеклист

  • сформулировать задачу одним предложением;
  • определить, что будет считаться готовым результатом;
  • проверить не только happy path;
  • записать, что было сложно и как это исправлено;
  • связать вывод с проектом или портфолио.

Как использовать в NativePath

Откройте /ru/courses, если нужна последовательная база. Для короткой тренировки подойдут /ru/games и /ru/arena. Если тема связана с рабочим процессом, её лучше закреплять через /ru/work-simulation: там важны не только код, но и критерии Done, описание решения и исправление замечаний.

Когда можно идти дальше

Можно переходить к следующей теме, если вы можете объяснить решение без копирования текста статьи, показать маленький пример и назвать хотя бы один плохой сценарий, который проверили. Если ответ пока расплывчатый, лучше сделать ещё одну маленькую практическую задачу по теме “Навигация в React Native”.

Учись по плану, а не по случайным кускам

Пройди placement в NativePath, получи маршрут до React Native разработчика и начни с подходящего уровня.

Пройти placement и получить планСоздать аккаунт