NativeScript - Navigation导航

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

在NativeScript的核心版本和Angular版本之间，Navigation存在很大差异。虽然核心框架Navigation是Navigation process的基础，但NativeScript的Angular模型采用了核心Navigation概念并将其扩展以使其与Angular框架兼容。

在本章中，让无涯教程了解Navigation如何在核心NativeScript中工作。

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

• Forward Navigation

• Backward Navigation

• Lateral Navigation

• Bottom Navigation

Forward Navigation

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

Frame

框架是Navigation的根级组件。它不是可见的集合，但充当页面之间的过渡的集合。

一个简单的例子如下-

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

Frame Navigation到(或加载)页面组件并进行渲染。

Page

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

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

• Page loads 屏幕的所有UI组件并进行渲染。

• 当用户单击按钮时，它将Navigation用户到另一个页面页面。

Backward Navigation

向后导航方法可在一个应用程序内或不同应用程序之间的屏幕上向后移动。这是向前导航的相反方向。简单的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()会将用户Navigation到上一页(如果有)。

Lateral Navigation

横向导航是指在相同层次结构的屏幕之间进行导航。它基于集线器模式。通过特定的导航组件(例如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="Navigation('featured-page')" tap="NavigationToFeatured" /> 
      <Button class="btn btn-primary" text="Navigation('search-page')" tap="NavigationToSearch" />
   </StackLayout> 
</Page>

• NavigationToFeatured 函数使用navigation()方法将用户Navigation到特色页面。

• 类似地， NavigationToSearch 函数将Navigation用户到搜索页面。

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

一个简单的例子如下-

<Page class="page"> 
   <ActionBar title="Item" class="action-bar"></ActionBar> 
   <StackLayout class="home-panel"> 
      <Button class="btn btn-primary" text="Navigation('hub-page')" tap="NavigationToHub" /> 
      <Button class="btn btn-primary" text="goBack()" tap="goBack" /> 
   </StackLayout> 
</Page>

Bottom和Tab Navigation

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

基于Angular的Navigation

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

NativeScript Angular Navigation概念可以分为以下部分:

• page-router-outlet tag

• nsRouterLink attractive

• RouterExtension class

• Custom RouterReuseStrategy

让无涯教程在本节中学习上述所有Angular  Navigation。

Page Router Outlet

如前所述，page-router-outlet是Angular的 router-outlet的替代品。page-router-outlet包装了Nativescript核心Navigation框架的Frame and Page策略。每个页面路由器都会创建一个新的Frame组件，并且每个已配置的组件都将使用Page组件进行包装。

Router Link (nsRouterLink)

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

    pageTransition  - 用于设置页面过渡动画。 true启用默认过渡。 false禁用过渡。

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

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

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

Router Extension

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

RouterExtensions公开的方法如下-

• Navigation

• NavigationByUrl

• back

• canGoBack

• backToPreviousPage

• canGoBackToPreviousPage

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

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

Custom Route Reuse Strategy

NativeScript使用自定义路由(RouterReuseStrategy)来适应移动应用程序的体系结构。与Web应用程序相比，移动应用程序在某些方面有所不同。

例如，当用户离开页面导航时，可以在Web应用程序中破坏该页面，并在用户导航到页面时重新创建该页面。但是，在移动应用程序中，页面将被保留并重新使用。在设计路由概念时会考虑这些概念。

Routes路由

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