Curso
React Native: Criando um aplicativo com tab navigation
A maioria dos aplicativos possuem mais de uma tela e com isso você vai precisar criar a navegação. Anteriormente você aprendeu a criar aplicativos com navegação utilizando Stack Navigation, Drawer Navigation e Tab Navigation. Neste curso vamos focar na navegação do tipo Tab Navigation, com isso, você vai aprender a personalizar as abas alterando as cores dos textos, inserindo ícones e alterando a barra de título.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
8 horas
Curso de React Native (8 aulas)
Aula 1 - Introdução
Tab navigation é um tipo de navegação que o aplicativo pode ter. Nesta aula vamos entender o que é e porque esse tipo de navegação é útil.
Aula 2 - Relembrando o conceito de navegação
Para focarmos no objetivo desse curso, que é personalizar as abas de um aplicativo, primeiro precisamos relembrar como funciona a navegação de um aplicativo e o que é necessário para criá-lo.
Aula 3 - Biblioteca de ícones
O Expo possui nativamente uma biblioteca com diversos ícones que podem ser utilizados tanto nas telas do seu aplicativo quanto para personalizar as abas. Nesta aula vamos aprender a utilizar a biblioteca @expo/vector-icons.
Aula 4 - Inserindo ícones na abas
Agora que você já sabe utilizar a biblioteca @expo/vector-icons podemos personalizar as abas inserindo ícones. Nesta aula você vai aprender a sintaxe utilizada para personalizar as abas do aplicativo.
Aula 5 - Estilizando as abas
Além de alterar o ícone das abas, também conseguimos personalizar o componente que agrupa as rotas. Com isso podemos alterar a cor de fundo das abas, definir a cor dos textos que exibem os nomes das rotas e a posição dos ícones com relação ao texto.
Aula 6 - Personalizando a barra de título
Além do container das abas e das próprias abas, também conseguimos estilizar a barra de título. Dessa forma conseguimos alterar, por exemplo, a cor de fundo, cor do texto, o alinhamento do texto, entre outros.
Aula 7 - Exemplo prático
Chegou a hora de revisar os conceitos aprendidos neste curso. Nesta aula vamos apresentar um aplicativo que possui três telas e utiliza a navegação do tipo tab navigation. Além disso, vamos utilizar ícones da biblioteca @expo/vector-icons.
Aula 8 - Faça você mesmo
Nesta aula vamos explicar os passos dados para criar o aplicativo que vimos na aula anterior para você replicá-lo. Dessa forma você colocará em prática a estilização das abas e da barra de título do aplicativo.
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