NativeScript - 導航

導航使使用者能夠快速滑動到他們想要的螢幕，或者在應用程式中導航，或者執行特定的操作。導航元件幫助您使用簡單的按鈕點選到更復雜的模式來實現導航。

NativeScript 的核心版本和 Angular 版本之間的導航差異很大。雖然核心框架導航是導航過程的基礎，但 NativeScript 的 Angular 模型採用了核心導航概念並對其進行了擴充套件，使其與 Angular 框架相容。

讓我們在本節中瞭解核心導航概念和 Angular 對導航的採用。

核心概念

讓我們在本節中瞭解核心 NativeScript 中的導航是如何工作的。

在 NativeScript 中，導航根據其應用的方向分為四類，如下所示：

前嚮導航
後向導航
橫向導航
底部導航

前嚮導航

前嚮導航是指將使用者導航到層次結構下一級的螢幕。它基於兩個 NativeScript 元件，Frame 和 Page。

Frame

Frame 是導航的根級元件。它不是一個可見的容器，而是充當頁面之間轉換的容器。

一個簡單的示例如下：

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

這裡，

Frame 導航到（或載入）featured-page 頁面元件並將其呈現。

Page

Page 緊隨 Frame 元件之後，它充當 UI 元件的容器。下面定義了一個簡單的示例：

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

這裡，

最初，Page 載入螢幕的所有 UI 元件並將其呈現。
當用戶點選按鈕時，它將導航使用者到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 函式將使用者導航到搜尋頁面。

中心頁面也可以透過頁面螢幕中提供的 navigate 方法訪問，使用者可以使用 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 元件實現的。

基於 Angular 的導航

NativeScript 擴充套件了其導航概念以適應 Angular 路由概念。NativeScript 透過擴充套件 Angular RouterModule 提供了一個新的模組 NativeScriptRouterModule。

NativeScript Angular 導航概念可以分為以下幾個部分：

page-router-outlet 標籤
nsRouterLink 屬性
RouterExtension 類
自定義RouterReuseStrategy

讓我們在本節中學習所有上述 Angular 導航。

頁面路由出口

如前所述，page-router-outlet 是 Angular 的 router-outlet 的替代品。page-router-outlet 包裝了 Nativescript 核心導航框架的 Frame 和 Page 策略。每個 page-router-outlet 建立一個新的 Frame 元件，並且在出口中配置的每個元件都將使用 Page 元件包裝。然後，使用 native navigate 方法導航到另一個頁面/路由。

路由連結 (nsRouterLink)

nsRouterLink 是 Angular 的 RouterLink 的替代品。它使 UI 元件能夠使用路由連結到另一個頁面。nsRouterLink 還提供了以下兩個選項：

pageTransition - 用於設定頁面過渡動畫。true 啟用預設過渡。false 停用過渡。特定值（如 slide、fadein 等）設定特定的過渡。

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) 來適應移動應用程式的架構。與 Web 應用程式相比，移動應用程式在某些方面有所不同。

例如，當用戶導航離開頁面時，可以在 Web 應用程式中銷燬頁面，並在使用者導航到頁面時重新建立它。但是，在移動應用程式中，頁面將被保留並重用。在設計路由概念時，會考慮這些概念。

路由

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 框架的方式公開其核心導航策略來使用它。

列印頁面