导航使用户可以快速滑入其所需的屏幕，或浏览应用程序或执行特定操作。导航组件可帮助您通过单击简单按钮来导航到更复杂的模式。

在NativeScript的核心版本和有角度的版本之间，导航存在很大差异。虽然核心框架导航是导航过程的基础，但NativeScript的Angular模型采用了核心导航概念，并对其进行了扩展以使其与Angular框架兼容。

让我们在本章中既查看核心导航概念又了解导航的角度。

核心概念

在本章中，让我们了解导航如何在核心NativeScript中工作。

在NativeScript中，导航根据其应用的方向分为以下四个不同的类别-

• 前进导航

• 向后导航

• 横向导航

• 底部导航

前进导航

前向导航是指将用户导航到下一级层次结构中的屏幕。它基于两个NativeScript组件，即Frame和Page。

帧

框架是导航的根级组件。它不是可见的容器，但充当页面之间的过渡的容器。

一个简单的例子如下-

这里，

框架导航到(或加载)特色页面页面组件并进行渲染。

页

Page在Frame组件旁边，它充当UI组件的容器。下面定义了一个简单的例子-

 
   </ActionBar>
    
       
    

这里，

• 最初，Page加载屏幕的所有UI组件并进行渲染。

• 当用户单击按钮时，它将把用户导航到另一页页面。

向后导航

向后导航方法可在一个应用程序内或不同应用程序之间的屏幕上向后移动。这是向前导航的相反方向。简单的goBack()方法用于导航回到上一页。

它定义如下-

这里，

用户点击按钮时将触发goBack()方法。 goBack()会将用户导航到上一页(如果有)。

横向导航

横向导航是指在相同层次结构的屏幕之间进行导航。它基于集线器模式。通过特定的导航组件(例如BottomNavigation，Tabs，TabView，SideDrawer和Modal View)可以启用它。

一个简单的例子定义如下-

这里，

• navigationToFeatured函数使用navigation()方法将用户导航到特色页面。

• 同样， NavigatorToSearch函数将导航用户到搜索页面。

也可以使用页面屏幕中可用的导航方法来访问中心页面，并且可以使用goBack()方法移出中心页面。

一个简单的例子如下-

底部和标签导航

移动应用程序中最常见的导航样式是基于标签的导航。选项卡导航位于屏幕底部或标题下方的顶部。这是通过使用TabView和BottomNavigation组件实现的。

基于角度的导航

NativeScript扩展了其导航概念，以适应Angular路由概念。 NativeScript通过扩展Angular RouterModule提供了一个新模块NativeScriptRouterModule。

NativeScript角度导航概念可以分为以下部分：

• 页面路由器出口标签

• nsRouterLink具有吸引力

• RouterExtension类

• 自定义路由器重用策略

让我们在本节中学习上述所有角度导航。

页面路由器插座

如前所述，page-router-outlet是Angular的router-outlet的替代品。 page-router-outlet包装了Nativescript核心导航框架的Frame and Page策略。每个页面路由器插座都会创建一个新的Frame组件，并且插座中每个已配置的组件都将使用Page组件进行包装。然后，本机导航方法用于导航到另一个页面/路线。

路由器链接(nsRouterLink)

nsRouterLink替代了Angular的RouterLink。它使UI组件可以使用路由链接到另一个页面。 nsRouterLink还提供以下两个选项-

pageTransition-用于设置页面过渡动画。 true启用默认过渡。 false禁用过渡。特定的值(例如，滑动，淡入等)设置特定的过渡。

clearHistory -true清除nsRouterLink的导航历史记录。

一个简单的示例代码如下-

路由器扩展

NativeScript提供了RouterExtensions类，并公开了核心NativeScript的导航函数。

RouterExtensions公开的方法如下-

• 导航

• navigationByUrl

• 背部

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