NativeScript - Navigation

A navegação permite aos usuários deslizar rapidamente para a tela desejada, navegar por um aplicativo ou executar uma ação específica. O componente de navegação ajuda a implementar a navegação usando simples cliques de botão para padrões mais complexos.

A navegação difere substancialmente entre a versão principal e angular do NativeScript. Embora a navegação da estrutura principal seja a base do processo de navegação, o modelo Angular do NativeScript adota o conceito de navegação principal e o estende para torná-lo compatível com a estrutura Angular.

Vejamos o conceito de navegação central e a adoção angular da navegação neste capítulo.

Conceitos Básicos

Vamos entender como a navegação funciona no núcleo do NativeScript neste capítulo.

No NativeScript, a navegação é dividida em quatro categorias diferentes com base na direção em que se aplica, conforme especificado abaixo -

  • Navegação para frente

  • Navegação para trás

  • Navegação lateral

  • Navegação inferior

Navegação para frente

A navegação direta se refere à navegação dos usuários para a tela no próximo nível de hierarquia. É baseado em dois componentes NativeScript,Frame e Page.

Frame

Frame é o componente de nível raiz para navegação. Não é um contêiner visível, mas atua como um contêiner para as transições entre as páginas.

Um exemplo simples é o seguinte -

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

Aqui,

Frame navega (ou carrega) o componente da página em destaque e o renderiza.

Page

A página está próxima ao componente Frame e atua como um contêiner para o componente UI. Um exemplo simples é definido abaixo -

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

Aqui,

  • Inicialmente, Page carrega todos os componentes de IU da tela e os renderiza.

  • Quando o usuário clica no botão, ele o conduz para another-page página.

Navegação para trás

O método de navegação para trás permite o movimento para trás nas telas de um aplicativo ou em diferentes aplicativos. É a direção oposta da navegação para a frente. O método goBack () simples é usado para navegar de volta à página anterior.

É definido abaixo -

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

Aqui,

goBack() método será acionado quando o usuário tocar no botão. goBack() leva os usuários à página anterior, se houver uma disponível.

Navegação Lateral

A navegação lateral se refere à navegação entre telas nos mesmos níveis de hierarquia. É baseado no padrão do hub. É habilitado por meio de componentes de navegação específicos, como BottomNavigation, Tabs, TabView, SideDrawer e Modal View.

Um exemplo simples é definido como abaixo -

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

Aqui,

  • navigateToFeatured A função usa o método navigate () para navegar o usuário até a página em destaque.

  • Similarmente, navigateToSearch função irá navegar o usuário para a página de pesquisa.

A página do hub também pode ser acessada usando o método de navegação disponível na tela da página e pode-se sair da página do hub usando o método goBack ().

Um exemplo simples é o seguinte -

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

Navegação na parte inferior e na guia

O estilo mais comum de navegação em aplicativos móveis é a navegação baseada em guias. A navegação por guias é organizada na parte inferior da tela ou na parte superior, abaixo do cabeçalho. É conseguida usando TabView e BottomNavigation componente.

Navegação baseada em ângulo

NativeScript estende seu conceito de navegação para acomodar o conceito de roteamento angular. NativeScript fornece um novo módulo, NativeScriptRouterModule, estendendo Angular RouterModule.

O conceito de navegação angular NativeScript pode ser categorizado nas seções abaixo -

  • tag page-router-outlet

  • nsRouterLink atraente

  • Classe RouterExtension

  • RouterReuseStrategy personalizado

Vamos aprender toda a navegação angular acima nesta seção.

Saída do roteador de página

Conforme aprendido anteriormente, a saída do roteador de página é a substituição da saída do roteador do Angular. page-router-outlet envolve a estratégia Frame e Page da estrutura de navegação central do Nativescript. Cada saída do roteador de página cria um novo componente Frame e cada componente configurado na saída será empacotado usando o componente Página. Em seguida, o método nativo de navegação é usado para navegar para outra página / rota.

Link do roteador (nsRouterLink)

nsRouterLink é a substituição do RouterLink da Angular. Ele permite que o componente de IU se vincule a outra página usando a rota. nsRouterLink também fornece duas opções abaixo -

pageTransition- É usado para definir a animação de transição de página. true ativa a transição padrão. false desativa a transição. Valores específicos como slide, fadein, etc., definem a transição particular.

clearHistory - true limpa o histórico de navegação de nsRouterLink.

Um exemplo de código simples é o seguinte -

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

Extensão do roteador

NativeScript fornece a classe RouterExtensions e expõe a função de navegação do NativeScript principal.

Os métodos expostos por RouterExtensions são os seguintes -

  • navigate

  • navigateByUrl

  • back

  • canGoBack

  • backToPreviousPage

  • canGoBackToPreviousPage

Um exemplo de código simples usando RouterExtensions é o seguinte -

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

Estratégia de reutilização de rota personalizada

NativeScript usa uma estratégia de reutilização de rota personalizada (RouterReuseStrategy) para acomodar a arquitetura de um aplicativo móvel. Um aplicativo móvel difere em certos aspectos em comparação a um aplicativo da web.

Por exemplo, a página pode ser destruída em um aplicativo da web quando o usuário sai da página e a recria quando o usuário navega para a página. Mas, no aplicativo móvel, a página será preservada e reutilizada. Esses conceitos são levados em consideração ao projetar o conceito de roteamento.

Rotas

Um módulo de roteamento simples no aplicativo NativeScript Angular será o seguinte -

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

Aqui,

O módulo de roteamento é muito semelhante à versão Angular, exceto algumas exceções. Na realidade, NativeScript usa sua estratégia de navegação central, expondo-a de maneira semelhante à estrutura Angular.