NativeScript - Navegación

La navegación permite a los usuarios deslizarse rápidamente hacia la pantalla deseada o navegar a través de una aplicación o realizar una acción en particular. El componente de navegación le ayuda a implementar la navegación mediante simples clics de botones a patrones más complejos.

La navegación difiere sustancialmente entre la versión central y angular de NativeScript. Si bien la navegación del marco central es la base para el proceso de navegación, el modelo Angular de NativeScript adopta el concepto de navegación central y lo extiende para hacerlo compatible con el marco Angular.

Veamos tanto el concepto central de navegación como la adopción angular de la navegación en este capítulo.

Conceptos básicos

Entendamos cómo funciona la navegación en el núcleo de NativeScript en este capítulo.

En NativeScript, la navegación se divide en cuatro categorías diferentes según la dirección en la que se aplica, como se especifica a continuación:

  • Navegación hacia adelante

  • Navegación hacia atrás

  • Navegación lateral

  • Navegación inferior

Navegación hacia adelante

La navegación hacia adelante se refiere a la navegación de los usuarios a la pantalla en el siguiente nivel de jerarquía. Se basa en dos componentes de NativeScript,Frame y Page.

Frame

Frame es el componente de nivel raíz para la navegación. No es un contenedor visible pero actúa como contenedor de transiciones entre páginas.

Un ejemplo simple es el siguiente:

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

Aquí,

Frame navega hasta (o carga) el componente de la página destacada y lo representa.

Page

La página está al lado del componente Frame y actúa como un contenedor para el componente UI. A continuación se define un ejemplo simple:

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

Aquí,

  • Inicialmente, Page carga todo el componente de IU de la pantalla y lo renderiza.

  • Cuando el usuario hace clic en el botón, lo llevará a another-page página.

Navegación hacia atrás

El método de navegación hacia atrás permite el movimiento hacia atrás a través de pantallas dentro de una aplicación o entre diferentes aplicaciones. Es la dirección opuesta a la navegación hacia adelante. El método simple goBack () se utiliza para volver a la página anterior.

Se define a continuación:

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

Aquí,

goBack() El método se activará cuando el usuario toque el botón. goBack() lleva a los usuarios a la página anterior, si hay alguna disponible.

Navegación lateral

La navegación lateral se refiere a la navegación entre pantallas en los mismos niveles de jerarquía. Se basa en un patrón de cubo. Se habilita a través de componentes de navegación específicos como BottomNavigation, Tabs, TabView, SideDrawer y Modal View.

Un ejemplo simple se define a continuación:

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

Aquí,

  • navigateToFeatured La función utiliza el método navigate () para navegar al usuario a la página destacada.

  • Similar, navigateToSearch La función llevará al usuario a la página de búsqueda.

También se puede acceder a la página central utilizando el método de navegación disponible en la pantalla de la página y uno puede salir de la página central utilizando el método goBack ().

Un ejemplo simple es el siguiente:

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

Navegación por la parte inferior y por pestañas

El estilo de navegación más común en las aplicaciones móviles es la navegación basada en pestañas. La navegación por pestañas se organiza en la parte inferior de la pantalla o en la parte superior debajo del encabezado. Se logra mediante el uso de TabView y el componente BottomNavigation .

Navegación basada en ángulo

NativeScript amplía su concepto de navegación para adaptarse al concepto de enrutamiento angular. NativeScript proporciona un nuevo módulo, NativeScriptRouterModule al extender Angular RouterModule.

El concepto de navegación angular de NativeScript se puede clasificar en la siguiente sección:

  • etiqueta de salida de enrutador de página

  • nsRouterLink atractivo

  • Clase RouterExtension

  • Enrutador personalizadoReuseStrategy

Aprendamos toda la navegación angular anterior en esta sección.

Salida del enrutador de página

Como se aprendió anteriormente, page-router-outlet es el reemplazo del router-outlet de Angular. page-router-outlet envuelve la estrategia Frame and Page del marco de navegación central de Nativescript. Cada página-enrutador-salida crea un nuevo componente Marco y cada componente configurado en la salida se empaquetará utilizando el componente Página. Luego, el método de navegación nativo se usa para navegar a otra página / ruta.

Enlace de enrutador (nsRouterLink)

nsRouterLink es el reemplazo del RouterLink de Angular. Permite que el componente de la interfaz de usuario se vincule a otra página mediante la ruta. nsRouterLink también proporciona a continuación dos opciones:

pageTransition- Se utiliza para configurar la animación de transición de página. true habilita la transición predeterminada. false desactiva la transición. Valores específicos como slide, fadein, etc., establecen la transición particular.

clearHistory - true borra el historial de navegación de nsRouterLink.

Un código de ejemplo simple es el siguiente:

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

Extensión del enrutador

NativeScript proporciona la clase RouterExtensions y expone la función de navegación del núcleo NativeScript.

Los métodos expuestos por RouterExtensions son los siguientes:

  • navigate

  • navigateByUrl

  • back

  • canGoBack

  • backToPreviousPage

  • canGoBackToPreviousPage

Un código de ejemplo simple que usa RouterExtensions es el siguiente:

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

Estrategia de reutilización de rutas personalizadas

NativeScript utiliza una estrategia de reutilización de rutas personalizada (RouterReuseStrategy) para adaptarse a la arquitectura de una aplicación móvil. Una aplicación móvil se diferencia en ciertos aspectos de una aplicación web.

Por ejemplo, la página se puede destruir en una aplicación web cuando el usuario navega fuera de la página y la vuelve a crear cuando el usuario navega a la página. Pero, en la aplicación móvil, la página se conservará y reutilizará. Estos conceptos se tienen en cuenta al diseñar el concepto de enrutamiento.

Rutas

Un módulo de enrutamiento simple en la aplicación NativeScript Angular será el siguiente:

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

Aquí,

El módulo de enrutamiento es muy similar a la versión Angular, excepto muy pocas excepciones. En realidad, NativeScript usa su estrategia de navegación central exponiéndola de una manera similar al marco Angular.