NativeScript - 导航

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

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

让我们在本章中了解核心导航概念和导航的角度采用。

核心概念

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

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

向前导航
向后导航
横向导航
底部导航

向前导航

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

框架

框架是导航的根级组件。它不是一个可见的容器，而是充当页面之间转换的容器。

一个简单的例子如下 -

<Frame id="featured" defaultPage="featured-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 组件并渲染它。
当用户单击该按钮时，它会将用户导航到另一个页面。

向后导航

向后导航方法可以在一个应用程序内或不同应用程序的屏幕上向后移动。它与正向导航的方向相反。简单的 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 通过扩展 Angular RouterModule 提供了一个新模块 NativeScriptRouterModule。

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

页面路由器出口标签
nsRouterLink 有吸引力
路由器扩展类
自定义路由器重用策略

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

寻呼路由器出口

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

路由器链接 (nsRouterLink)

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

pageTransition - 用于设置页面过渡动画。true 启用默认转换。false 禁用转换。特定值（如幻灯片、淡入等）设置特定的过渡。

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

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

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

路由器扩展

NativeScript提供了RouterExtensions类并公开了核心NativeScript的导航功能。

RouterExtensions 公开的方法如下 -

导航
按网址导航
后退
可以返回
返回上一页
可以返回上一页

使用 RouterExtensions 的简单示例代码如下 -

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

自定义路由重用策略

NativeScript 使用自定义路由重用策略 (RouterReuseStrategy) 来适应移动应用程序的架构。与网络应用程序相比，移动应用程序在某些方面有所不同。

例如，当用户导航离开页面时，可以在 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 框架的方式公开它来使用其核心导航策略。