DroidScript
DroidScript
инструменты для мобильной разработки

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

Thunkable X  
17.06.2018

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

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

Каждый из доступных способов имеет свои преимущества и особенности работы, о которых нужно хотя бы иметь общее представление, чтобы случайно не создать экран-ловушку или неудобную в использовании навигацию. Для начала разберёмся с работой блоков "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.

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

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

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

Stack-навигация

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

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

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

Drawer navigator невозможно использовать в реальных приложениях по причине того, что в Thunkable X не существует способа показать пользователю, что эта панель используется в приложении. Можно, конечно, в заголовке отобразить гамбургер-кнопку, но работать она не будет, так как не существует блока для программного вызова боковой панели.

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

Разные варианты навигации и компоненты можно использовать совместно. Например, в Tab navigator поместить Stack navigator и др.

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

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