NativeScript - Navigation
La navigation permet aux utilisateurs de glisser rapidement vers l'écran de leur choix, de naviguer dans une application ou d'effectuer une action particulière. Le composant de navigation vous aide à implémenter la navigation à l'aide de simples clics de bouton vers des modèles plus complexes.
La navigation diffère considérablement entre la version principale et angulaire de NativeScript. Alors que la navigation du framework de base est la base du processus de navigation, le modèle Angular de NativeScript adopte le concept de navigation de base et l'étend pour le rendre compatible avec le framework Angular.
Voyons à la fois le concept de navigation de base et l'adoption angulaire de la navigation dans ce chapitre.
Concepts de base
Voyons comment la navigation fonctionne dans le noyau NativeScript dans ce chapitre.
Dans NativeScript, la navigation est divisée en quatre catégories différentes en fonction de la direction dans laquelle elle s'applique, comme spécifié ci-dessous -
Navigation vers l'avant
Navigation arrière
Navigation latérale
Navigation inférieure
Navigation vers l'avant
La navigation vers l'avant fait référence à la navigation des utilisateurs vers l'écran au niveau suivant de la hiérarchie. Il est basé sur deux composants NativeScript,Frame et Page.
Frame
Frame est le composant de niveau racine pour la navigation. Ce n'est pas un conteneur visible mais agit comme un conteneur pour les transitions entre les pages.
Un exemple simple est le suivant -
<Frame id="featured" defaultPage="featured-page" />Ici,
Frame navigue vers (ou charge) le composant de page en vedette et le rend.
Page
La page se trouve à côté du composant Frame et agit comme un conteneur pour le composant UI. Un exemple simple est défini ci-dessous -
<Page loaded="onPageLoaded">
<ActionBar title="Item" class="action-bar"></ActionBar>
<AbsoluteLayout>
<Label text="Label"/<
<Button text="navigate('another-page')" tap="onTap"/>
</AbsoluteLayout>
</Page>Ici,
Initialement, Page charge tous les composants de l'interface utilisateur de l'écran et le rend.
Lorsque l'utilisateur clique sur le bouton, il dirige l'utilisateur vers another-page page.
Navigation arrière
La méthode de navigation arrière permet un mouvement vers l'arrière à travers les écrans d'une application ou entre différentes applications. C'est la direction opposée de la navigation vers l'avant. La méthode goBack () simple est utilisée pour revenir à la page précédente.
Il est défini ci-dessous -
<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>Ici,
goBack() La méthode sera déclenchée lorsque l'utilisateur appuie sur le bouton. goBack() fait naviguer les utilisateurs vers la page précédente, si elle est disponible.
Navigation latérale
La navigation latérale fait référence à la navigation entre les écrans aux mêmes niveaux de hiérarchie. Il est basé sur le modèle de moyeu. Il est activé via des composants de navigation spécifiques tels que BottomNavigation, Tabs, TabView, SideDrawer et Modal View.
Un exemple simple est défini comme ci-dessous -
<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>Ici,
navigateToFeatured La fonction utilise la méthode navigate () pour diriger l'utilisateur vers la page sélectionnée.
De même, navigateToSearch La fonction dirigera l'utilisateur vers la page de recherche.
La page hub peut également être atteinte en utilisant la méthode de navigation disponible dans l'écran de la page et on peut sortir de la page hub en utilisant la méthode goBack ().
Un exemple simple est le suivant -
<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>Navigation par le bas et les onglets
Le style de navigation le plus courant dans les applications mobiles est la navigation par onglets. La navigation par onglets est disposée en bas de l'écran ou en haut sous l'en-tête. Il est réalisé en utilisant le composant TabView et BottomNavigation .
Navigation basée sur angulaire
NativeScript étend son concept de navigation pour s'adapter au concept de routage angulaire. NativeScript fournit un nouveau module, NativeScriptRouterModule en étendant Angular RouterModule.
Le concept de navigation angulaire NativeScript peut être classé en section comme ci-dessous -
balise page-router-outlet
nsRouterLink attrayant
Classe RouterExtension
Routeur personnalisé
Apprenons toute la navigation angulaire ci-dessus dans cette section.
Sortie de routeur de page
Comme appris précédemment, page-router-outlet est le remplacement du router-outlet d'Angular. page-router-outlet encapsule la stratégie Frame and Page du framework de navigation Nativescript. Chaque page-routeur-sortie crée un nouveau composant Frame et chaque composant configuré dans la sortie sera encapsulé à l'aide du composant Page. Ensuite, la méthode native de navigation est utilisée pour naviguer vers une autre page / route.
Lien de routeur (nsRouterLink)
nsRouterLink est le remplacement de RouterLink d'Angular. Il permet au composant d'interface utilisateur de créer un lien vers une autre page en utilisant route. nsRouterLink fournit également ci-dessous deux options -
pageTransition- Il est utilisé pour définir l'animation de transition de page. true active la transition par défaut. false désactive la transition. Des valeurs spécifiques telles que slide, fadein, etc. définissent la transition particulière.
clearHistory - true efface l'historique de navigation de nsRouterLink.
Un exemple de code simple est le suivant -
<Button text="Go to Home" [nsRouterLink]="['/home']"
pageTransition="slide" clearHistory="true"></Button>Extension de routeur
NativeScript fournit la classe RouterExtensions et expose la fonction de navigation du noyau NativeScript.
Les méthodes exposées par RouterExtensions sont les suivantes -
navigate
navigateByUrl
back
canGoBack
backToPreviousPage
canGoBackToPreviousPage
Un exemple de code simple utilisant RouterExtensions est le suivant -
import { RouterExtensions } from "nativescript-angular/router";
@Component({
// ...
})
export class HomeComponent {
constructor(private routerExtensions: RouterExtensions) { }
}Stratégie de réutilisation d'itinéraire personnalisée
NativeScript utilise une stratégie de réutilisation d'itinéraire personnalisée (RouterReuseStrategy) pour s'adapter à l'architecture d'une application mobile. Une application mobile diffère sur certains aspects d'une application Web.
Par exemple, la page peut être détruite dans une application Web lorsque l'utilisateur quitte la page et la recrée lorsque l'utilisateur accède à la page. Mais, dans une application mobile, la page sera conservée et réutilisée. Ces concepts sont pris en compte lors de la conception du concept de routage.
Itinéraires
Un module de routage simple dans l'application NativeScript Angular sera comme ci-dessous -
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 { }Ici,
Le module de routage est très similaire à la version Angular à quelques exceptions près. En réalité, NativeScript utilise sa stratégie de navigation de base en l'exposant d'une manière similaire au framework Angular.