Curso
React Native: Navegação
Praticamente todo aplicativo possui mais de uma tela, com isso é necessário que o usuário possa navegar entre uma tela e outra. Para que isso aconteça no React Native é necessário instalar algumas bibliotecas e fazer as devidas configurações nos componentes. Neste curso você vai aprender como criar e configurar a navegação de um aplicativo React Native utilizando as navegações: Stack navigation, Drawer navigation e Tab navigation. Para isso vamos instalar as bibliotecas @react-navigation/native, @react-navigation/bottom-tabs, @react-navigation/drawer e @react-navigation/stack do React Navigation.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
12 horas
Curso de React Native (10 aulas)
Aula 1 - Introdução
Quando um aplicativo possui mais de uma tela é necessário que o usuário possa mudar de uma tela para outra. Para isso a navegação é necessária.
Aula 2 - Instalando as bibliotecas
Para utilizar navegação em um aplicativo React Native é necessário instalar a biblioteca react-navigation ela será responsável pela configuração e linkagem das rotas. Para cuidar do código nativo ela conta com algumas outras bibliotecas que vemos nesta aula.
Aula 3 - Gerenciando a navegação com NavigationContainer
Através do componente NavigationContainer definimos que o aplicativo vai ter navegação. Ele é importado da biblioteca @react-navigation/native. Dentro dele inserimos o tipo de navegação do nosso aplicativo e suas rotas.
Aula 4 - Tipos de navegação
Existem diferentes tipos de navegação que um aplicativo pode ter, por exemplo através de uma barra de título, uma barra com abas ou um menu arrastável da esquerda para direita. Nesta aula você vai aprender quais são esses tipos de navegação.
Aula 5 - Tab Navigation
Uma das formas de navegação de um aplicativo é através de abas. Esse tipo de navegação é muito comum em aplicativos como Facebook, Youtube, Itaú entre outros. Nesta aula você vai aprender a instalar e a configurar este tipo de navegação.
Aula 6 - Drawer Navigation
Em alguns aplicativos a navegação é através de um menu lateral que é exibido quando arrastamos do canto da tela para o meio. Dessa forma, o menu aparece exibindo os nomes das rotas. Este tipo de navegação é chamada de Drawer navigation.
Aula 7 - Componente Button
Button é um componente nativo que exibe na tela um botão. Através desse botão conseguimos inserir ações relacionadas à navegação, como por exemplo, navegar entre uma rota e outra ou então abrir o menu do Drawer navigation.
Aula 8 - Button - Abrindo o menu lateral
Você já deve ter utilizado um aplicativo que ao tocar em um botão o menu lateral é exibido. Nesta aula você vai aprender como isso é feito.
Aula 9 - Button e a navegação entre telas
Já aprendemos que para navegar entre uma rota e outra basta tocar em seus nomes no menu lateral ou então nas abas. Outra forma possível é através do toque de um botão. Nesta aula você vai aprender como isso é feito.
Aula 10 - Stack Navigation
Stack navigation é o tipo de navegação que permite navegar entre rotas. Ele é responsável por criar as rotas da aplicação. Com Stack navigation a navegação entre rotas é feita através do toque de um botão como veremos nesta aula.
Veja outros cursos de React Native
React Native: Consumindo APIs
React Native: Consumindo APIs Públicas de Terceiros
React Native: Usando Array.map e Array.filter