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