Pull to refresh

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

Reading time 4 min
Views 4.2K
Данный материал посвящен работе по рефакторингу навигации в мобильной разработке.
В статье приведены примеры возможных проблем, а также выходов из сложных ситуаций, связанных с работой навигации в мобильной разработке на 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
Tags:
Hubs:
+8
Comments 1
Comments Comments 1

Articles