NativeScript - การนำทาง

การนำทางช่วยให้ผู้ใช้สามารถปัดเข้าอย่างรวดเร็วไปยังหน้าจอที่ต้องการหรือเพื่อเลื่อนดูแอพหรือเพื่อดำเนินการบางอย่าง องค์ประกอบการนำทางช่วยให้คุณใช้การนำทางโดยใช้การคลิกปุ่มง่ายๆไปยังรูปแบบที่ซับซ้อนมากขึ้น

การนำทางแตกต่างกันอย่างมากระหว่าง NativeScript เวอร์ชันหลักและเชิงมุม ในขณะที่การนำทางเฟรมเวิร์กหลักเป็นรากฐานสำหรับกระบวนการการนำทางโมเดล Angular ของ NativeScript ใช้แนวคิดการนำทางหลักและขยายออกไปเพื่อให้เข้ากันได้กับเฟรมเวิร์กเชิงมุม

ให้เราดูทั้งแนวคิดการนำทางหลักและการนำเชิงมุมมาใช้ในบทนี้

แนวคิดหลัก

ให้เราเข้าใจว่าการนำทางทำงานอย่างไรใน NativeScript หลักในบทนี้

ใน NativeScript การนำทางแบ่งออกเป็นสี่ประเภทที่แตกต่างกันตามทิศทางที่ใช้ตามที่ระบุด้านล่าง -

  • นำทางไปข้างหน้า

  • การนำทางย้อนกลับ

  • การนำทางด้านข้าง

  • การนำทางด้านล่าง

นำทางไปข้างหน้า

การนำทางไปข้างหน้าหมายถึงการนำทางผู้ใช้ไปยังหน้าจอในลำดับชั้นระดับถัดไป มันขึ้นอยู่กับสององค์ประกอบ NativeScriptFrame และ Page.

Frame

เฟรมเป็นส่วนประกอบระดับรูทสำหรับการนำทาง ไม่ใช่คอนเทนเนอร์ที่มองเห็นได้ แต่ทำหน้าที่เป็นคอนเทนเนอร์สำหรับการเปลี่ยนระหว่างเพจ

ตัวอย่างง่ายๆมีดังนี้ -

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

ที่นี่

เฟรมนำทางไปยัง (หรือโหลด) คอมโพเนนต์ของเพจแนะนำและแสดงผล

Page

เพจอยู่ถัดจากองค์ประกอบเฟรมและทำหน้าที่เป็นคอนเทนเนอร์สำหรับคอมโพเนนต์ 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 ทั้งหมดของหน้าจอและแสดงผล

  • เมื่อผู้ใช้คลิกปุ่มก็จะนำทางผู้ใช้ไป another-page หน้า.

การนำทางย้อนกลับ

วิธีการนำทางย้อนกลับช่วยให้สามารถเคลื่อนถอยหลังผ่านหน้าจอภายในแอพเดียวหรือข้ามแอพต่างๆ มันเป็นทิศทางตรงกันข้ามกับการนำทางไปข้างหน้า วิธีง่ายๆ 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 ฟังก์ชันใช้วิธีการนำทาง () เพื่อนำทางผู้ใช้ไปยังหน้าแนะนำ

  • ในทำนองเดียวกัน 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 ขยายแนวคิดการนำทางเพื่อรองรับแนวคิดการกำหนดเส้นทางเชิงมุม NativeScript มีโมดูลใหม่ NativeScriptRouterModule โดยการขยาย Angular RouterModule

แนวคิดการนำทางเชิงมุมของ NativeScript สามารถแบ่งออกเป็นส่วนต่างๆดังนี้ -

  • แท็ก page-router-outlet

  • nsRouterLink น่าสนใจ

  • คลาสRouterExtension

  • เราเตอร์แบบกำหนดเองReuseStrategy

ให้เราเรียนรู้การนำทางเชิงมุมข้างต้นทั้งหมดในส่วนนี้

เพจเราเตอร์เอาท์เล็ท

ตามที่เรียนไว้ก่อนหน้านี้ page-router-outlet คือการเปลี่ยนเราเตอร์เต้าเสียบของ Angular page-router-outlet รวมกลยุทธ์ Frame และ Page ของกรอบการนำทางหลัก Nativescript แต่ละหน้าเราเตอร์เต้าเสียบจะสร้างส่วนประกอบเฟรมใหม่และส่วนประกอบที่กำหนดค่าไว้ในเต้าเสียบแต่ละชิ้นจะถูกห่อโดยใช้ส่วนประกอบของหน้า จากนั้นวิธีการนำทางดั้งเดิมจะใช้เพื่อนำทางไปยังหน้า / เส้นทางอื่น

ลิงค์เราเตอร์ (nsRouterLink)

nsRouterLink เป็นการแทนที่ RouterLink ของ Angular ช่วยให้คอมโพเนนต์ UI เชื่อมโยงไปยังเพจอื่นโดยใช้เส้นทาง nsRouterLink ยังมีสองตัวเลือกด้านล่าง -

pageTransition- ใช้เพื่อตั้งค่าภาพเคลื่อนไหวการเปลี่ยนหน้า true เปิดใช้งานการเปลี่ยนค่าเริ่มต้น เท็จปิดใช้งานการเปลี่ยน ค่าเฉพาะเช่นสไลด์เฟดอิน ฯลฯ ตั้งค่าการเปลี่ยนเฉพาะ

clearHistory - true ล้างประวัติการนำทางของ nsRouterLink

โค้ดตัวอย่างง่ายๆมีดังนี้ -

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

ส่วนขยายเราเตอร์

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) เพื่อรองรับสถาปัตยกรรมของแอปพลิเคชันมือถือ แอปพลิเคชันมือถือมีความแตกต่างกันในบางแง่มุมเมื่อเปรียบเทียบกับแอปพลิเคชันบนเว็บ

ตัวอย่างเช่นเพจอาจถูกทำลายในเว็บแอปพลิเคชันเมื่อผู้ใช้ออกจากเพจและสร้างใหม่เมื่อผู้ใช้ไปที่เพจ แต่ในแอปพลิเคชันมือถือหน้าจะถูกเก็บรักษาและนำกลับมาใช้ใหม่ แนวคิดเหล่านี้ถูกนำมาพิจารณาในขณะออกแบบแนวคิดการกำหนดเส้นทาง

เส้นทาง

โมดูลการกำหนดเส้นทางอย่างง่ายในแอปพลิเคชัน 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 { }

ที่นี่

โมดูลการกำหนดเส้นทางคล้ายกับเวอร์ชันเชิงมุมมากยกเว้นข้อยกเว้นบางประการ ในความเป็นจริง NativeScript ใช้กลยุทธ์การนำทางหลักโดยเปิดเผยในลักษณะที่คล้ายกับ Angular framework