DroidScript
DroidScript
разработка мобильных приложений

Thunkable X: навигация

Thunkable X  
11.11.2019

При разработке многоэкранного приложения возникает вопрос организации переходов между ними. Для перехода с одного экрана на другой можно использовать:

  • блоки
  • компоненты навигации
  • блоки и компоненты навигации

Каждый из доступных способов имеет свои преимущества и особенности работы, о которых нужно хотя бы иметь общее представление, чтобы случайно не создать экран-ловушку или неудобную в использовании навигацию. Для начала разберёмся с работой блоков "Screen.Starts" и "Screen.Opens":

  • Screen.Starts вызывается на этапе инициализации экрана (при его первом отображении)
  • Screen.Opens вызывается при каждом отображении экрана

Самым простым способом перехода на другой экран является использование блока "navigate to". Если экраны не находятся внутри контейнера какого-либо навигационного компонента (Tab, Draw или Stack navigator), то при каждом вызове блока "navigate to" в стеке экранов будет создан новый экран. Например, если пользователь с использованием данного блока сделал переход

Screen1 -> Screen2 -> Screen1 -> Screen2,

то в стеке экранов будет 4 экрана, а не 2, как может показаться. При этом переход на новый экран происходит с анимацией и выполнением блоков "Screen.Starts" и "Screen.Opens".

При помощи swipe-жеста можно вернуться на предыдущий экран. В этом случае будет вызван только блок "Screen.Opens".

Базовая навигация

Показанная базовая навигация содержит в себе ловушку. Иногда пользователи хотят при запуске приложения показать экран-заставку, который в течение какого-то времени показывается, а затем по таймеру происходит переход на другой экран. Если после этого пользователь при помощи swipe-жеста вернётся на данный экран-заставку, то больше перейти с него он уже никуда не сможет - таймер сработал, а блок Screen.Starts, в котором, возможно, находится блок запуска таймера, не вызывается при возврате на ранее открытый экран. Для выхода из этой ситуации можно:

  • переместить блок запуска таймера в блок Screen.Opens
  • создать на экране-заставке видимую или полноэкранную невидимую кнопку, при нажатии на которую будет осуществлён переход на другой экран
  • поместить экраны в контейнер Tab Navigator с отключенным режимом перехода по swipe-жесту, чтобы не позволить пользователю вернуться на экран-заставку
  • отказаться от создания экрана-заставки

Если экран-заставку нужно показать только один раз при запуске приложения, то первые два варианта не подходят, так как пользователь может сколько угодно раз возвращаться к ним. Предпоследний вариант является подходящим, но тогда станет невозможным использовать для перехода между экранами swipe-жест. Последний вариант - самое лучшее решение.

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

Навигационные компоненты

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

Компоненты навигации Top или Bottom Tab navigator используется для произвольного перехода между экранами одинаковой значимости. Показ области ярлыков вкладок можно отключить и тогда переход можно осуществлять при помощи блока navigate to (в этом случае не происходит создание нового экрана) или swipe-жеста. Ярлыки вкладки могут содержать как текст, так и пиктограммы.

Данная навигация не предназначена для отображения большого количества вкладок. При повторном открытии экранов срабатывают только блоки Screen.Opens, так как блоки Screen.Starts для всех экранов сработают в момент инициализации навигатора вкладок.

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

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

Для перехода на дочерний экран в родительском экране используется блок "navigate to". В результате этого создаётся новый экран, который помещается в стопку и выполняются блоки "Screen.Starts" и "Screen.Opens". Для возврата обратно на главный экран используется стрелка на панели навигации (в заголовке) или swipe-жест. Использование на дочернем экране блока "navigate to" для перехода на главный экран является ошибкой, та как при этом в стек экранов будет добавлен новый экран.

Stack-навигация

При использовании Stack-навигации при каждом переходе на дочерний экран он создаётся заново и добавляется в стопку экранов, а при возврате на родительский - удаляется из стопки экранов.

Stack-навигация работает и при использовании блока "link to". Этот блок позволяет открыть внешний браузер или приложение, установленное на телефон, которое имеет глубокую ссылку, а затем вернуться обратно в приложение..

Компонент навигации Drawer navigator (выдвижная боковая панель), как и Tab-навигатор, предназначен для организации произвольного доступа к экранам с равноценной значимостью, но интересен тем, что в отличие от других компонентов навигации позволяет работать с большим количеством экранов, имеющим длинные названия, благодаря прокручивающемуся списку. При переходе на любой выбранный экран выполняются блоки "Screen.Starts" и "Screen.Opens".

Разные варианты навигации и компоненты можно использовать совместно. Например, в Tab navigator поместить Stack navigator и др., но при помощи блока нельзя перейти на экран другой структуры. Однако, можно перейти на первый экран навигатора, если указать в качестве цели не экран, а этот элемент навигации.

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

Thunkable X  
© 2016-2022  Александр Страшко