Navegação (StackNavigator, TabNavigator e Drawer) – Aula 7 | Curso React Native (aprendiz)

Parte 1


Parte 2


Parte 3


Aprendendo sobre navegação no React Native


Nesta aula vamos aprender como trabalhar com navegação dentro do React Native. Vamos utilizar o react navigation.

Após criar o projeto com expo init, dentro da pasta do projeto, vamos precisar instalar o react navigation/native:


Vamos precisar também, instalar o StackNavigation.


Vamos instalar o Drawer Navigation.


E instalar também o Tabs navigation.


O próximo passo é instalar as dependências que um projeto que utiliza o expo como gerenciador necessita, conforme podemos ver na documentação do React Navigation.


Com tudo instalado vamos dar o start no nosso projeto e entender como configurar as navegações dentro do React Native.
Vamos startar nosso projeto:


Vamos criar uma estrutura de pastas para ter nossos pages que serão chamados:


App.js – Construindo nosso App.js

1° – Vamos importar o NavigationContainer e o createStackNavigator


2° – Depois importar nossas páginas

 

3° – Para podermos trabalhar com o Stack navigation vamos criar uma const para facilitar na hora de utilizar.


4° E por ultimo vamos construir o return do nosso component App.


DICA

Aqui podemos passar qual o componente vai iniciar a aplicação.

Podemos criar uma pagina simples para poder testar nossa navegação.


PAGE CONTACTS

Para conseguir navegar entre as páginas, o react navigation permite a navegação através do navigation.navigate(“NOME-DA-PAGE”) utilizando essa expressão dentro de um onPress


PAGE Details

Implementando o Drawer Navigation

O Drawer Navigation tem como padrão a navegação com um estilo um pouco diferente, podemos passar o dedo sobre a tela arrastando da esquerda para a direita, exibindo assim o menu lateral.

E para ver funcionando, podemos aproveitar parte do que criamos somente trocando o estilo de navegação de Stack Navigation para Drawer e assim ver funcionando nosso Drawer Navigation.

 

O primeiro passo então é selecionar todos os Stacks e substituir para Drawer e somente deixar em minúsculo o caminho do import do Drawer

O código ficará assim:


PAGE CONTACTS


PAGE DETAILS

Assim podemos utilizar o Drawer Navigation dentro do nosso app e você pode escolher qual a melhor navegação para o seu app.

Agora veremos um pouco sobre como passar propriedades de uma tela para outra dentro do React Navigation.


Como passar propriedades através dos links de navegação?

Podemos passar parâmetros de uma tela para outra, através do onPress utilizando o navigation.navigate(‘Details’, { nome: “Joao” }).

Em Contacts:


Recebendo as propriedades dentro de Details:


DICA

Para nosso app não quebrar quando passarmos algum parâmetro que não existe, ou que esperamos receber e não foi passado, basta adicionar ‘?’ após params:

Vamos seguir aprendendo mais sobre Tab Navigation.


Tab Navigation

O Tab Navigation é uma forma de navegação entre telas através de uma barra fixa na parte inferior do nosso app.

Vamos começar então fazendo as configurações necessárias e montar uma estrutura bem interessante que é ter o Stack navigation atuando junto do Tab Navigation que é muito utilizado nos projetos de apps atuais. Vamos começar:

Vamos importar o Tab Navigation.


Precisamos também criar uma const para poder utilizar o Tab navigator logo abaixo do nosso Stack.


Vamos Criar um component Agenda para ser nossa principal tela a ser carregada e poderemos navegar entre a tela principal de agenda e os contatos através do nosso Tab Navigation.


E agora dentro do da nossa function Tabs utilizaremos para ficar disponível no rodapé do nosso app.

Não podemos esquecer de importar Agenda dentro de App.js.


Precisamos criar uma function para poder utilizar dentro do nosso stackNavigation.


Após a configuração acima, nós podemos então chamar o nosso Tabs dentro do nosso stack navigation passando Tabs como parâmetro do nosso component Agenda.

Agora temos o nosso Tab navigation sendo carregado, controlando o acesso tanto da nossa página principal quanto a página de contatos e temos em cada contato o link para os detalhes do contato sendo gerenciado a navegação através do Stack Navigation

 

Espero que tenha curtido essa nossa aula, espero que tenha aprendido de fato os primeiros passos sobre navegações no React Native e com os conhecimentos adquiridos possa criar super Apps!

Até a próxima aula!

0 0 vote
Article Rating
maio 26, 2021
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: