Navigation
https://portal.prof.vilhena.ifro.edu.br/
Instalando as bibliotecas
O React Native não possui nativamente uma forma de lidar com navegação, por isso contamos com uma biblioteca chamada react-navigation que vai permitir navegar entre as telas do aplicativo.
Instalando a biblioteca React Navigation
O React Native não possui nativamente uma forma de lidar com navegação, por isso contamos com uma biblioteca chamada react-navigation que vai permitir navegar entre as telas do aplicativo.
Tipos de navegação
Tab navigation
Este tipo de navegação é caracterizado por exibir abas na parte inferior do aplicativo. Ao tocar em uma aba a tela associada será exibida. Além disso na parte superior a barra de título é exibida com o nome da rota ativa. Note que as abas representam os nomes das telas (rotas), como mostra a imagem abaixo.
Tipos de navegação
Drawer navigation
Esse tipo de navegação exibe um menu lateral e uma barra de título. O menu lateral pode ser aberto ao puxar a tela da esquerda para direita ou então através do toque do botão da barra superior.Perceba que os nomes das telas (rotas) aparecem no menu, como mostra a imagem abaixo.
Tipos de navegação
Stack Navigation
Essa navegação possui por padrão uma barra de título e um botão para voltar à tela anterior. Esse tipo de navegação não expõe as telas da aplicação como as anteriores fazem através do menu ou de abas, como mostra a imagem abaixo.
Tab Navigation
Tab Navigation
Navegação através de abas é muito comum em aplicativos e facilita o usuário a identificar quais telas o aplicativo possui.
Veja na imagem abaixo que é possível saber quais são as telas disponíveis no aplicativo apenas olhando para as abas.
Nesta aula vamos aprender como criar rotas em um aplicativo
utilizando Tab Navigation.
Instalando a biblioteca
Stack Navigator
createStackNavigator (Stack Navigator)
Essa navegação possui uma barra de título e por padrão um botão para voltar à tela anterior. Esse tipo de navegação não expõe as telas da aplicação como as anteriores que expõem através do menu ou de abas
Para cada tipo de navegação que será utilizado no aplicativo é necessário instalar a biblioteca correspondente a esse tipo.
Note que os tipos Tab navigation e Drawer navigation possuem os nomes das telas ou
StackNavigator: Quando o usuário toca em um link, uma nova tela é exibida sobre as telas anterior.
Stack Navigator - CreateStackNavigator - Como Usar
Stack Navigator - CreateStackNavigator - Como Usar
Stack Navigator - CreateStackNavigator - Como Usar
Stack Navigator - CreateStackNavigator - Como Usar
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation
Drawer Navigation