- NativeScript - Discussion
- NativeScript - Useful Resources
- NativeScript - Quick Guide
- NativeScript - Testing
- NativeScript - Creating an Application in iOS
- NativeScript - Creating an Application in Android
- NativeScript - Native APIs Using JavaScript
- NativeScript - Plugins
- NativeScript - Modules
- NativeScript - Data Binding
- NativeScript - Events Handling
- NativeScript - Navigation
- NativeScript - Layout Containers
- NativeScript - Widgets
- NativeScript - Templates
- NativeScript - Angular Application
- NativeScript - Architecture
- NativeScript - Installation
- NativeScript - Introduction
- NativeScript - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
NativeScript - Navigation
Navigation enables users to quickly swipe in to their desired screen or to navigate through an app or to perform a particular action. Navigation component helps you implement navigation using simple button cpcks to more complex patterns.
Navigation differ substantially between core and angular version of NativeScript. While core framework navigation is foundation for navigation process, NativeScript’s Angular model adopts the core navigation concept and extends it to make it compatible with Angular framework.
Let us see both core navigation concept and angular adoption of navigation in this chapter.
Core Concepts
Let us understand how the navigation works in core NativeScript in this chapter.
In NativeScript, navigation is sppt into four different categories based on the direction it apppes as specified below −
Forward navigation
Backward navigation
Lateral navigation
Bottom navigation
Forward Navigation
Forward Navigation refers to navigating users to the screen in the next level of hierarchy. It is based on two NativeScript components, Frame and Page.
Frame
Frame is the root level component for navigation. It is not a visible container but acts as a container for transitions between pages.
A simple example is as follows −
<Frame id="featured" defaultPage="featured-page" />
Here,
Frame navigates to (or loads) the featured-page page component and renders it.
Page
Page is next to Frame component and it acts as a container for UI component. Simple example is defined below −
<Page loaded="onPageLoaded"> <ActionBar title="Item" class="action-bar"></ActionBar> <AbsoluteLayout> <Label text="Label"/< <Button text="navigate( another-page )" tap="onTap"/> </AbsoluteLayout> </Page>
Here,
Initially, Page loads all the UI component of the screen and renders it.
When user cpcks the button, it will navigate the user to another-page page.
Backward Navigation
Backward navigation method enables backward movement through screens within one app or across different apps. It is the opposite direction of forward navigation. Simple goBack() method is used to navigate back to the previous page.
It is defined below −
<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>
Here,
goBack() method will be triggered when user taps the button. goBack() navigates the users to the previous page, if one is available.
Lateral Navigation
Lateral navigation refers to the navigation between screens at same levels of hierarchy. It is based on hub pattern. It is enabled through specific navigation components such as BottomNavigation, Tabs, TabView, SideDrawer and Modal View.
A simple example is defined as below −
<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>
Here,
navigateToFeatured function uses navigate() method to navigate the user to featured page.
Similarly, navigateToSearch function will navigate the user to search page.
The hub page can also be reached using navigate method available in page screen and one can move out of hub page using goBack() method.
A simple example is as follows −
<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>
Bottom and Tab Navigation
The most common style of navigation in mobile apps is tab-based navigation. The Tab Navigation is arranged at the bottom of the screen or on the top below the header. It is achieved by using TabView and BottomNavigation component.
Angular based navigation
NativeScript extends its navigation concept to accommodate the Angular routing concept. NativeScript provides a new module, NativeScriptRouterModule by extending Angular RouterModule.
NativeScript angular navigation concept can be categorized into section as below −
page-router-outlet tag
nsRouterLink attractive
RouterExtension class
Custom RouterReuseStrategy
Let us learn all the above angular navigation in this section.
Page Router Outlet
As learned earper, page-router-outlet is the replacement of Angular’s router-outlet. page-router-outlet wraps the Frame and Page strategy of Nativescript core navigation framework. Each page-router-outlet creates a new Frame component and each configured components in the outlet will be wrapped using Page component. Then, the native navigate method is used to navigate to another page / route.
Router Link (nsRouterLink)
nsRouterLink is the replacement of Angular’s RouterLink. It enables UI component to pnk to another page using route. nsRouterLink also provides below two options −
pageTransition − It is used to set page transition animation. true enables default transition. false disables the transition. Specific values pke spde, fadein, etc., set the particular transition.
clearHistory − true clears the navigation history of nsRouterLink.
A simple example code is as follows −
<Button text="Go to Home" [nsRouterLink]="[ /home ]" pageTransition="spde" clearHistory="true"></Button>
Router Extension
NativeScript provides RouterExtensions class and exposes the navigation function of the core NativeScript.
The methods exposed by RouterExtensions are as follows −
navigate
navigateByUrl
back
canGoBack
backToPreviousPage
canGoBackToPreviousPage
A simple example code using RouterExtensions is as follows −
import { RouterExtensions } from "nativescript-angular/router"; @Component({ // ... }) export class HomeComponent { constructor(private routerExtensions: RouterExtensions) { } }
Custom Route Reuse Strategy
NativeScript uses a custom route reuse strategy (RouterReuseStrategy) to accommodate the architecture of a mobile apppcation. A mobile apppcation differs in certain aspects in comparison to a web apppcation.
For example, the page can be destroyed in a web apppcation when user navigates away from the page and recreates it when the user navigates to the page. But, in mobile apppcation, the page will be preserved and reused. These concepts are taken into consideration while designing the routing concept.
Routes
A simple routing module in NativeScript Angular apppcation will be as below −
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 { }
Here,
Routing module is very similar to Angular version except very few exceptions. In reapty, NativeScript uses its core navigation strategy by exposing it in a way similar to Angular framework.
Advertisements