NativeScript - Navigazione

La navigazione consente agli utenti di scorrere rapidamente nella schermata desiderata o di navigare in un'app o di eseguire un'azione particolare. Il componente di navigazione ti aiuta a implementare la navigazione utilizzando semplici clic sui pulsanti per modelli più complessi.

La navigazione differisce sostanzialmente tra la versione core e angolare di NativeScript. Mentre la navigazione del framework principale è la base per il processo di navigazione, il modello Angular di NativeScript adotta il concetto di navigazione principale e lo estende per renderlo compatibile con il framework Angular.

Vediamo sia il concetto di navigazione di base che l'adozione angolare della navigazione in questo capitolo.

Concetti principali

Vediamo in questo capitolo come funziona la navigazione nel core NativeScript.

In NativeScript, la navigazione è suddivisa in quattro diverse categorie in base alla direzione in cui si applica come specificato di seguito:

  • Navigazione in avanti

  • Navigazione all'indietro

  • Navigazione laterale

  • Navigazione dal basso

Navigazione in avanti

La navigazione in avanti si riferisce alla navigazione degli utenti nella schermata nel livello gerarchico successivo. Si basa su due componenti NativeScript,Frame e Page.

Frame

Frame è il componente di livello principale per la navigazione. Non è un contenitore visibile ma funge da contenitore per le transizioni tra le pagine.

Un semplice esempio è il seguente:

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

Qui,

Frame passa al (o carica) il componente della pagina in primo piano e lo visualizza.

Page

La pagina si trova accanto al componente Frame e funge da contenitore per il componente UI. Un semplice esempio è definito di seguito:

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

Qui,

  • Inizialmente, Page carica tutti i componenti dell'interfaccia utente dello schermo e ne esegue il rendering.

  • Quando l'utente fa clic sul pulsante, naviga l'utente verso another-page pagina.

Navigazione all'indietro

Il metodo di navigazione all'indietro consente il movimento all'indietro tra le schermate all'interno di un'app o tra app diverse. È la direzione opposta alla navigazione in avanti. Il metodo goBack () semplice viene utilizzato per tornare alla pagina precedente.

È definito di seguito:

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

Qui,

goBack() verrà attivato quando l'utente tocca il pulsante. goBack() porta gli utenti alla pagina precedente, se disponibile.

Navigazione laterale

La navigazione laterale si riferisce alla navigazione tra le schermate agli stessi livelli di gerarchia. Si basa sul modello del mozzo. È abilitato tramite componenti di navigazione specifici come BottomNavigation, Tabs, TabView, SideDrawer e Modal View.

Un semplice esempio è definito come di seguito:

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

Qui,

  • navigateToFeatured la funzione utilizza il metodo navigate () per navigare l'utente alla pagina in primo piano.

  • Allo stesso modo, navigateToSearch la funzione porterà l'utente alla pagina di ricerca.

La pagina hub può essere raggiunta anche utilizzando il metodo di navigazione disponibile nella schermata della pagina e si può uscire dalla pagina hub utilizzando il metodo goBack ().

Un semplice esempio è il seguente:

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

Navigazione in basso e con schede

Lo stile di navigazione più comune nelle app mobili è la navigazione basata su schede. La navigazione a schede è disposta nella parte inferiore dello schermo o in alto sotto l'intestazione. Si ottiene utilizzando i componenti TabView e BottomNavigation .

Navigazione basata su angolare

NativeScript estende il suo concetto di navigazione per accogliere il concetto di routing angolare. NativeScript fornisce un nuovo modulo, NativeScriptRouterModule estendendo Angular RouterModule.

Il concetto di navigazione angolare di NativeScript può essere classificato in sezioni come di seguito:

  • tag page-router-outlet

  • nsRouterLink attraente

  • Classe RouterExtension

  • RouterReuseStrategy personalizzato

Impariamo tutta la navigazione angolare sopra in questa sezione.

Pagina Router Outlet

Come appreso in precedenza, page-router-outlet è la sostituzione del router-outlet di Angular. page-router-outlet racchiude la strategia Frame e Page del framework di navigazione principale di Nativescript. Ogni page-router-outlet crea un nuovo componente Frame e ogni componente configurato nell'outlet verrà avvolto utilizzando il componente Page. Quindi, il metodo di navigazione nativo viene utilizzato per navigare verso un'altra pagina / percorso.

Collegamento router (nsRouterLink)

nsRouterLink è la sostituzione di RouterLink di Angular. Consente al componente UI di collegarsi a un'altra pagina utilizzando route. nsRouterLink fornisce anche le seguenti due opzioni:

pageTransition- Viene utilizzato per impostare l'animazione di transizione della pagina. true abilita la transizione predefinita. false disabilita la transizione. Valori specifici come diapositiva, dissolvenza, ecc., Impostano la particolare transizione.

clearHistory - true cancella la cronologia di navigazione di nsRouterLink.

Un semplice codice di esempio è il seguente:

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

Estensione del router

NativeScript fornisce la classe RouterExtensions ed espone la funzione di navigazione del nucleo NativeScript.

I metodi esposti da RouterExtensions sono i seguenti:

  • navigate

  • navigateByUrl

  • back

  • canGoBack

  • backToPreviousPage

  • canGoBackToPreviousPage

Un semplice codice di esempio che utilizza RouterExtensions è il seguente:

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

Strategia di riutilizzo del percorso personalizzato

NativeScript utilizza una strategia di riutilizzo del percorso personalizzato (RouterReuseStrategy) per adattare l'architettura di un'applicazione mobile. Un'applicazione mobile differisce in alcuni aspetti rispetto a un'applicazione web.

Ad esempio, la pagina può essere distrutta in un'applicazione Web quando l'utente esce dalla pagina e la ricrea quando l'utente accede alla pagina. Tuttavia, nell'applicazione mobile, la pagina verrà conservata e riutilizzata. Questi concetti vengono presi in considerazione durante la progettazione del concetto di routing.

Itinerari

Un semplice modulo di routing nell'applicazione NativeScript Angular sarà il seguente:

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

Qui,

Il modulo di routing è molto simile alla versione Angular tranne pochissime eccezioni. In realtà, NativeScript utilizza la sua strategia di navigazione principale esponendola in un modo simile al framework Angular.