Данный материал посвящен работе по рефакторингу навигации в мобильной разработке.
В статье приведены примеры возможных проблем, а также выходов из сложных ситуаций, связанных с работой навигации в мобильной разработке на React Native.

Мы рассмотрим основные особенности и проблемы мобильного Legacy проекта, шаг за шагом пройдем цепочку действий, состоящую из постановки задачи, определения узких мест, поиска решений сложившихся проблем и получения желаемого результата.

Рабочая среда

React Native — это сравнительно молодая платформа для разработки мобильных приложений с открытым исходным кодом, созданная Facebook. Она используется при создании приложений для Android, iOS и UWP, позволяет разработчикам использовать React вместе с собственными возможностями платформы.

Навигация — чуть ли не самый важный элемент в мобильном приложении. При построении архитектуры приложения стоит уделить этой теме особое внимание.

Наиболее распространенные библиотеки для построения навигации:

React-Navigation. Это самая популярная библиотека, которая очень часто упоминается в официальной документации. Соответственно, она имеет немало звезд в своей копилке на GitHub.
React-Native-Navigation. Данная платформа использует базовые нативные API-интерфейсы для iOS и Android. Это популярная альтернатива React-Navigation. Она подойдет тем, кто высоко ценит соблюдение соглашений платформы и не слишком заботится о настройке.

Менее распространенные библиотеки:

React-Router-Native. Это неполная библиотека. Но если вы уже знакомы с React Router API и предъявляете достаточно простые требования к своему приложению, данная платформа может выручить вас.
React-Native-Router-Flux. Эта библиотека основана на React-Navigation, но предоставляет другой API для взаимодействия с ней.

Мой опыт

Расскажу коротко о своем опыте в роли разработчика. С React Native я работаю более двух лет. Есть несколько завершенных проектов, опубликованных в магазинах приложений. За это время я успел ознакомиться с большим количеством инструментов в окружении React Native. Навигация часто является камнем преткновения в проектах мобильной разработки. Легаси проект, над которым я работал, не стал исключением. Об этом пойдет речь далее.

Задача

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

Все экраны были разделены на три типа: экраны авторизации, экраны администратора и экраны пользователя.

Вместо логичного соединения корневого стека и Таб навигатора с переключением ролей присутствовало нелогичное разделение на стеки навигации по ролям пользователей.

Причем построение навигации для каждого пользователя повторялась.

Мне нужно было решить следующие проблемы:

Общее подтормаживание работы приложения.
Отсутствие “пререндера” главных экранов, что не лучшим образом сказывалось на комфорте пользователей.
Навигация выглядела не нативно. Анимации перехода были заметны и неудобны для работы.

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

“Настакивание” экранов в навигационном стеке, т.е. не происходил сброс (очищение). Экраны, которые мы открывали, хранились в стеке. Таким образом, почти неизбежной была утечка памяти и последующее аварийное закрытие приложения.

Решение

Итоги проведенной работы:

Проблема, связанная с оптимизацией работы навигации, отсутствием пререндера и общим подтормаживанием, решилась путем обновления библиотеки навигации, использования навигатора вкладок и отказа от применения самописного модального окна в качестве навигатора.
После рефакторинга навигация стала более естественной. Отслеживание работы анимаций перехода, а также пререндер главных экранов на табах позволили повысить комфорт пользователей.
Навигация была разбита на стеки в Таб навигации. Использование переходов контролировалось лучше. Были использованы переходы на верхний уровень.

Для версии React-Navigation использовались следующие методы:

popToTop — переход на главный экран в стеке
replace — замена текущего роута на новый
reset — очистка состояния навигатора и замена его результатом нескольких действий

Результаты

Удалось избавиться от большинства дублирующих экранов навигации и выстроить более логичную структуру.

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

Выводы

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

Выбор библиотеки навигации является важным шагом в разработке вашего приложения. Любое решение, принятое без должного обдумывания и осторожности, может повредить масштабируемости или создать другие проблемы.

Полезные ссылки:

React-Navigation
React Native
Problems of development the legacy mobile project
React-Native-Navigation
React-Router-Native
React-Native-Router-Flux

Работа с навигацией при рефакторинге легаси проекта в React Native