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

打印页面