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.