NativeScript - Навигация

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

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

Давайте посмотрим как основную концепцию навигации, так и угловое внедрение навигации в этой главе.

Основные концепции

Давайте разберемся, как работает навигация в основном NativeScript в этой главе.

В NativeScript навигация разделена на четыре разные категории в зависимости от направления, в котором она применяется, как указано ниже:

Прямая навигация
Обратная навигация
Боковая навигация
Нижняя навигация

Прямая навигация

Прямая навигация - это переход пользователей к экрану на следующем уровне иерархии. Он основан на двух компонентах NativeScript,Frame и Page.

Frame

Фрейм - это компонент корневого уровня для навигации. Это не видимый контейнер, но он действует как контейнер для переходов между страницами.

Простой пример выглядит следующим образом -

<Frame id="featured" defaultPage="featured-page" />

Вот,

Frame переходит к (или загружает) компонент страницы избранной страницы и отображает его.

Page

Страница находится рядом с компонентом Frame и действует как контейнер для компонента пользовательского интерфейса. Простой пример определен ниже -

<Page loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar>
   <AbsoluteLayout> 
      <Label text="Label"/< 
      <Button text="navigate('another-page')" tap="onTap"/> 
   </AbsoluteLayout> 
</Page>

Вот,

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

Обратная навигация

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

Это определено ниже -

<Page class="page" loaded="onPageLoaded"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="Back" tap="goBack"/> 
   </StackLayout> 
</Page>

Вот,

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

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

Боковая навигация относится к навигации между экранами на одном уровне иерархии. Он основан на узоре ступицы. Он активируется через определенные компоненты навигации, такие как BottomNavigation, Tabs, TabView, SideDrawer и Modal View.

Простой пример определен ниже -

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd"> 
   <ActionBar title="Hub" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('featured-page')" tap="navigateToFeatured" /> 
      <Button class="btn btn-primary" text="navigate('search-page')" tap="navigateToSearch" />
   </StackLayout> 
</Page>

Вот,

navigateToFeatured функция использует метод navigate () для перехода пользователя на избранную страницу.
Так же, navigateToSearch функция будет перемещать пользователя на страницу поиска.

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

Простой пример выглядит следующим образом -

<Page class="page"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="navigate('hub-page')" tap="navigateToHub" /> 
      <Button class="btn btn-primary" text="goBack()" tap="goBack" /> 
   </StackLayout> 
</Page>

Снизу и по вкладкам

Самый распространенный стиль навигации в мобильных приложениях - это навигация на основе вкладок. Панель навигации по вкладкам расположена внизу экрана или вверху под заголовком. Это достигается с помощью компонента TabView и BottomNavigation .

Угловая навигация

NativeScript расширяет свою концепцию навигации, чтобы учесть концепцию маршрутизации Angular. NativeScript предоставляет новый модуль NativeScriptRouterModule, расширяя Angular RouterModule.

Концепцию угловой навигации NativeScript можно разделить на следующие разделы:

тег страницы-маршрутизатора-выхода
nsRouterLink привлекательный
RouterExtension класс
Пользовательский RouterReuseStrategy

Давайте изучим всю вышеупомянутую угловую навигацию в этом разделе.

Выход маршрутизатора страницы

Как было сказано ранее, page-router-outlet - это замена роутера-выхода Angular. page-router-outlet оборачивает стратегию Frame and Page основной навигационной инфраструктуры Nativescript. Каждый page-router-output создает новый компонент Frame, и каждый настроенный компонент в выходе будет заключен в оболочку с использованием компонента Page. Затем для перехода к другой странице / маршруту используется собственный метод навигации.

Ссылка на маршрутизатор (nsRouterLink)

nsRouterLink - это замена RouterLink Angular. Это позволяет компоненту пользовательского интерфейса ссылаться на другую страницу с помощью маршрута. nsRouterLink также предоставляет следующие два варианта:

pageTransition- Используется для установки анимации перехода страницы. true включает переход по умолчанию. false отключает переход. Определенные значения, такие как слайд, затухание и т. Д., Задают конкретный переход.

clearHistory - true очищает историю навигации nsRouterLink.

Простой пример кода выглядит следующим образом -

<Button text="Go to Home" [nsRouterLink]="['/home']" 
   pageTransition="slide" clearHistory="true"></Button>

Расширение маршрутизатора

NativeScript предоставляет класс RouterExtensions и предоставляет функцию навигации основного NativeScript.

Методы, предоставляемые RouterExtensions, следующие:

navigate
navigateByUrl
back
canGoBack
backToPreviousPage
canGoBackToPreviousPage

Простой пример кода с использованием RouterExtensions выглядит следующим образом:

import { RouterExtensions } from "nativescript-angular/router"; 
@Component({ 
   // ... 
}) 
export class HomeComponent { 
   constructor(private routerExtensions: RouterExtensions) { } 
}

Стратегия повторного использования настраиваемого маршрута

NativeScript использует настраиваемую стратегию повторного использования маршрута (RouterReuseStrategy), чтобы приспособиться к архитектуре мобильного приложения. Мобильное приложение по некоторым аспектам отличается от веб-приложения.

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

Маршруты

Простой модуль маршрутизации в приложении NativeScript Angular будет выглядеть следующим образом:

import { NgModule } from "@angular/core"; 
import { Routes } from "@angular/router"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { HomeComponent } from "./home.component"; 
import { SearchComponent } from "./search.component"; 
const routes: Routes = [ 
   { path: "", redirectTo: "/home", pathMatch: "full" }, 
   { path: "home", component: HomeComponent }, 
   { path: "search", component: SearchComponent }, 
];
@NgModule({ 
   imports: [NativeScriptRouterModule.forRoot(routes)], 
   exports: [NativeScriptRouterModule] 
}) 
export class AppRoutingModule { }

Вот,

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