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.