HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

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 组件并进行渲染。

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

向后导航

向后导航方法允许在一个应用程序内或跨不同应用程序的屏幕之间向后移动。它是向前导航的反方向。简单的 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 函数使用 navigation() 方法将用户导航至特色页面。

  • 类似地，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 组件实现的。

基于 Angular 的导航

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

NativeScript angular 导航概念可以分为以下几部分 −

  • page-router-outlet 标签

  • nsRouterLink 吸引人

  • RouterExtension 类

  • 自定义 RouterReuseStrategy

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

Page Router Outlet

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

Router Link (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>

Router Extension

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

❮ 上一节 下一节 ❯