NativeScript - Điều hướng

Điều hướng cho phép người dùng nhanh chóng vuốt vào màn hình mong muốn của họ hoặc điều hướng qua một ứng dụng hoặc thực hiện một hành động cụ thể. Thành phần điều hướng giúp bạn triển khai điều hướng bằng cách nhấp vào nút đơn giản đến các mẫu phức tạp hơn.

Điều hướng về cơ bản khác nhau giữa phiên bản lõi và phiên bản góc cạnh của NativeScript. Trong khi điều hướng khung cốt lõi là nền tảng cho quá trình điều hướng, mô hình Angular của NativeScript áp dụng khái niệm điều hướng cốt lõi và mở rộng nó để làm cho nó tương thích với khung công tác Angular.

Chúng ta hãy xem cả khái niệm điều hướng cốt lõi và việc áp dụng điều hướng theo góc độ trong chương này.

Khái niệm cốt lõi

Hãy để chúng tôi hiểu cách điều hướng hoạt động trong NativeScript cốt lõi trong chương này.

Trong NativeScript, điều hướng được chia thành bốn danh mục khác nhau dựa trên hướng nó áp dụng như được chỉ định bên dưới:

• Điều hướng chuyển tiếp

• Điều hướng lùi

• Điều hướng bên

• Điều hướng dưới cùng

Điều hướng chuyển tiếp

Điều hướng chuyển tiếp đề cập đến việc điều hướng người dùng đến màn hình ở cấp độ phân cấp tiếp theo. Nó dựa trên hai thành phần NativeScript,Frame và Page.

Frame

Khung là thành phần cấp gốc để điều hướng. Nó không phải là một vùng chứa có thể nhìn thấy nhưng hoạt động như một vùng chứa để chuyển đổi giữa các trang.

Một ví dụ đơn giản như sau:

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

Đây,

Khung điều hướng đến (hoặc tải) thành phần trang của trang nổi bật và hiển thị nó.

Page

Trang nằm bên cạnh thành phần Khung và nó hoạt động như một vùng chứa cho thành phần Giao diện người dùng. Ví dụ đơn giản được định nghĩa dưới đây:

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

Đây,

• Ban đầu, Trang tải tất cả thành phần giao diện người dùng của màn hình và hiển thị nó.

• Khi người dùng nhấp vào nút, nó sẽ điều hướng người dùng đến another-page trang.

Điều hướng lùi

Phương pháp điều hướng lùi cho phép di chuyển lùi qua các màn hình trong một ứng dụng hoặc trên các ứng dụng khác nhau. Nó là hướng ngược lại của chuyển hướng phía trước. Phương thức goBack () đơn giản được sử dụng để điều hướng trở lại trang trước.

Nó được định nghĩa dưới đây -

<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>

Đây,

goBack() phương thức sẽ được kích hoạt khi người dùng nhấn vào nút. goBack() điều hướng người dùng đến trang trước đó, nếu có.

Điều hướng bên

Điều hướng bên đề cập đến việc điều hướng giữa các màn hình ở cùng cấp độ phân cấp. Nó dựa trên mẫu trung tâm. Nó được kích hoạt thông qua các thành phần điều hướng cụ thể như BottomNavigation, Tabs, TabView, SideDrawer và Modal View.

Một ví dụ đơn giản được định nghĩa như sau:

<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>

Đây,

• navigateToFeatured hàm sử dụng phương thức điều hướng () để điều hướng người dùng đến trang nổi bật.

• Tương tự, navigateToSearch chức năng sẽ điều hướng người dùng đến trang tìm kiếm.

Trang trung tâm cũng có thể được truy cập bằng cách sử dụng phương pháp điều hướng có sẵn trong màn hình trang và một người có thể di chuyển ra khỏi trang trung tâm bằng phương thức goBack ().

Một ví dụ đơn giản như sau:

<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>

Điều hướng dưới cùng và tab

Kiểu điều hướng phổ biến nhất trong các ứng dụng dành cho thiết bị di động là điều hướng dựa trên tab. Điều hướng Tab được sắp xếp ở cuối màn hình hoặc trên cùng bên dưới tiêu đề. Nó đạt được bằng cách sử dụng TabView và thành phần BottomNavigation .

Điều hướng dựa trên góc

NativeScript mở rộng khái niệm điều hướng của nó để phù hợp với khái niệm định tuyến Angular. NativeScript cung cấp một mô-đun mới, NativeScriptRouterModule bằng cách mở rộng Angular RouterModule.

Khái niệm điều hướng góc của NativeScript có thể được phân loại thành phần như dưới đây:

• thẻ page-router-outlet

• nsRouterLink hấp dẫn

• RouterExtension lớp

• Bộ định tuyến tùy chỉnhReuseStrategy

Hãy để chúng tôi tìm hiểu tất cả các điều hướng góc ở trên trong phần này.

Đầu ra bộ định tuyến trang

Như đã tìm hiểu trước đó, page-router-outlet là sự thay thế của router-outlet của Angular. page-router-outlet kết thúc chiến lược Khung và Trang của khung điều hướng cốt lõi Nativecript. Mỗi trang-bộ định tuyến-đầu ra sẽ tạo ra một thành phần Khung mới và mỗi thành phần đã định cấu hình trong cửa ra sẽ được bọc bằng thành phần Trang. Sau đó, phương pháp điều hướng gốc được sử dụng để điều hướng đến một trang / tuyến đường khác.

Liên kết bộ định tuyến (nsRouterLink)

nsRouterLink là sự thay thế của RouterLink của Angular. Nó cho phép thành phần giao diện người dùng liên kết đến một trang khác bằng cách sử dụng tuyến đường. nsRouterLink cũng cung cấp hai tùy chọn bên dưới:

pageTransition- Nó được sử dụng để thiết lập hoạt ảnh chuyển trang. true cho phép chuyển đổi mặc định. false vô hiệu hóa quá trình chuyển đổi. Các giá trị cụ thể như slide, fadein, v.v., hãy đặt chuyển đổi cụ thể.

clearHistory - true xóa lịch sử điều hướng của nsRouterLink.

Một mã ví dụ đơn giản như sau:

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

Tiện ích mở rộng bộ định tuyến

NativeScript cung cấp lớp RouterExtensions và thể hiện chức năng điều hướng của NativeScript lõi.

Các phương thức được trình bày bởi RouterExtensions như sau:

• navigate

• navigateByUrl

• back

• canGoBack

• backToPreviousPage

• canGoBackToPreviousPage

Một mã ví dụ đơn giản sử dụng RouterExtensions như sau:

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

Chiến lược tái sử dụng tuyến đường tùy chỉnh

NativeScript sử dụng chiến lược tái sử dụng tuyến tùy chỉnh (RouterReuseStrategy) để phù hợp với kiến ​​trúc của ứng dụng di động. Ứng dụng di động khác ở một số khía cạnh so với ứng dụng web.

Ví dụ: trang có thể bị hủy trong ứng dụng web khi người dùng điều hướng khỏi trang và tạo lại trang khi người dùng điều hướng đến trang. Tuy nhiên, trong ứng dụng di động, trang sẽ được giữ nguyên và sử dụng lại. Những khái niệm này được xem xét trong khi thiết kế khái niệm định tuyến.

Các tuyến đường

Một mô-đun định tuyến đơn giản trong ứng dụng NativeScript Angular sẽ như sau:

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 { }

Đây,

Mô-đun định tuyến rất giống với phiên bản Angular ngoại trừ rất ít ngoại lệ. Trên thực tế, NativeScript sử dụng chiến lược điều hướng cốt lõi của nó bằng cách hiển thị nó theo cách tương tự như Angular framework.