[Música] fala Mestres beleza no vídeo de hoje nós vamos estar falando aqui sobre alguns detalhes algumas configurações que nós podemos fazer no nosso Tab bar né no tab naveg ali o navegador em Abas a gente vai ver aqui algumas configurações que a gente consegue usar tanto na na nossa nas opções de tela né que se aplicariam em todas as telas quanto em cada tela específica a gente vai ver essas configurações todas aí e brincar um pouco com os valores Beleza então antes da gente ir pro vídeo Eu gostaria de pedir que você deixasse um like
no vídeo se inscrever-se no canal e também acompanha a gente nas redes sociais os links estarão todos aí na descrição meu nome é jancer eu sou desenvolvedor aqui na Mestres e bora lá para mais um [Música] conteúdo bom então eu estou aqui no nosso projeto tá o mesmo projeto que nós paramos na aula passada onde eu apresentei para vocês né o tab Navigator e nessa aula aqui nós vamos Como eu disse né Nós vamos explorar opções específicas que fazem sentido na verdade serem usadas de uma forma genérica para todas as telas e algumas opções elas
são mais específicas então por exemplo né e e como que a gente vai usar isso né Em cada tela nós temos as opções que a gente vai conseguir aplicar as as propriedades que eu vou estar mostrando para vocês aqui nessa aula e só que no tabs também que seria o navegador em si né Nós temos aqui screen options né que vai ser um objeto de opções pras telas né isso que vai ser aplicado para todas as telas então o primeira propriedade que eu quero mostrar aqui para vocês é por exemplo Tab bar Label esse aqui
ele faz sentido definir específico para cada tela mas eu vou definir aqui no screen options para vocês verem que por exemplo ele ele é uma string né então Tab bar Label é um texto e aí esse texto é Label né é a descrição para cada e ela ela é exibida aqui na parte inferior embaixo do ícone né então se eu dar um zoom aqui ó no Home ó lá o início a o home o ícone né de uma casa e embaixo nós temos o Label que é o texto que eu coloquei e é Label também
eu vou deixar aqui Mestres olha lá o Mestres E se eu se eu voltar o zoom aqui também settings né em configurações ó lá o Mestres também então o tab bar Label faz sentido que eu aplique em cada ã em cada tela né ou seja aqui em options então ao invés de deixar em screen options eu posso colocar em hum em option nas options nas opções de cada tela Então esse Lab na verdade cada tela nós estamos passando um título para ela né Deixa eu voltar aqui esse título né que seria que aqui é início
e em settings e o título é ajustes esse título ele é o que é exibido no cabeçalho e ele também tá sendo exibido no no tab bar né na barra de nas nossas Abas aí mas se eu quiser diferenciar esses valores eu vou usar aqui o tab bar Label para fazer essa diferenciação tá então é é uma outra é uma forma da gente definir um título diferente do que é exibido no cabeçalho da nossa página caso isso nos interesse tá E por falar em cabeçalho nas aulas anteriores na verdade nas aulas lá de stack Navigator
eu abordei todas as opções que nós temos referente ao cabeçalho tá então se eu venho aqui em screen options né e definir e digitar header a gente pode ver que nós temos diversas opções para tá para est personalizando o cabeçalho e também no nas opções de cada tela né eu consigo fazer aí a personalização do cabeçalho então a gente consegue fazer muita coisa e tudo isso já foi abordado em aulas anteriores tá por isso que eu não vou trazer isso aqui de novo porque a gente já falou bastante sobre esse tema tá então aqui nessa
aula a gente vai estar falando somente do nosso Tab bar que seria aí o nosso esse nosso essa barra de Abas tá então eu falei de Label nós temos uma outra opção que é o tab bar show Label que que é um boleano se eu definir como tru o que que eu tô falando eu quero que o meu à que a barra de Abas exiba o Label e o Label é essa descrição que fica abaixo do ícone e Mas eu posso passar isso aqui como falso também né E aí ele vai remover o Label né
vai ficar somente o ícone aí sem texto descrevendo o que seria aquilo tá então isso aqui faz sentido a gente deixar no screen options né no no nesse cara Global n para se aplicar em todas em todas as todas as telas né para todos os ícones aí para todas as abas que nós temos na aplicação tá então temos o o tabb show Label eu vou deixando comentado né então vou comentar o tab bar show Label e vamos vamos aqui pro próximo que seria o tab bar Label Style né que seria que é uma forma da
gente definir um estilo para esse Label para essa descrição aí que nós temos em cada ícone né então eu posso definir os estilos para esse texto e estilos para texto nós temos por exemplo Font size né aumentar o tamanho da fonte olha lá o a fonte já ficou bem maior né Fonte weight que seria o peso né eu vou dear aqui bold que é o ele vai deixar o texto temos o Color né a cor do texto Verde ele vai também deixar como Verde então eu consigo estilizar por completo aí o nosso o o texto
né esse Label aí essa descrição nos nossos ícones caso a gente decida exibir eles aí na nossa aplicação Tá então vamos pro próximo que seria o bed né trabalhar com bads então nós temos aqui ó Tab bar bed que é o qu essa bed ele é um número definir por exemplo dois e ele vai adicionar esse marcador aqui que é um indicador de notificação eu gosto de chamar como indicador de notificação né o nome disso de fato é bad e mas é um numérico que vai ser exibido aí em cada tela né Em cada para
cada aba como eu defini aqui dentro do screen options ele aplicou Em ambos né mas esse Tab barbad ele faz sentido que eu coloque ele especificamente na tela ali que eu vou ter essas notificações né Essas ações pendentes a a gente vai dependendo da aplicação né a gente vai implementar isso aí para ter algum significado mas a ideia geral é que o bed indique que tenha alguma pendência ou algo para ser visto para ser realizado naquela tela tá ele é um numérico e Aqui nós temos também o tab bar bed Style né eu consigo estilizar
isso aqui o bed ele é um texto né então eu consigo definir o fonte size aumentar a fonte não vai ficar tão legal né porque o tamanho dele é bem limitado Mas eu posso aumentar o tamanho da fonte eu posso definir o background color né a cor de fundo ali como Talvez um cinza e o texto né a cor do texto como azul azul não né vermelho Yellow Amarelo A gente vai conseguindo aí ir brincando com esses valores para enfim definir o estilo a gente consegue né definir o estilo aí do Tab bar tá então
eu vou deixar isso aqui comentado também pra gente partir pras outras opções tá que aqui nós temos as cores ativas e inativas E essas cores ativas e inativas os tint Colors né que seriam as cores principais aí é faz sentido eu definir aqui no screen options que seria o qu eu defini aqui o tint Color né que seria aqui ó Tab bar activity Inc que é o quê quando a aba estiver ativa eu vou querer usar essa cor como cor principal então eu vou definir aqui o verde da Mestres né eu tenho aqui o hexadecimal
é uma string tá então quando eu defino isso a aba que eu estou presente quando eu clico em home quando eu clico em ajustes tirar aqui esse Zoom ele vai usar essa cor principal esse Verde como cor principal que é a cor que ele usa para pintar o ícone para pintar o a descrição né o o Label ali e ele vai usar essa cor tá que é a Active color e eu tenho também a cor o inactive né inactive Tab bar inactive color que eu vou passar aqui por exemplo vermelho então a aba que está
ativa vai usar o verde a aba as abas que estão inativas aqui como eu só tenho duas né mas se eu tivesse mais ele usaria essas cores eu vou definir aqui de novo a tela de settings né settings duas vezes eh eu vou chamar o nome vai ser settings 2 para não dar conflito ele vai ficar me dando um warning eh porque eu não tenho o arquivo criado né é Não vamos deixar isso para lá deixa só essas duas aqui que a gente consegue eh fazer esses exemplos com elas mas só esclarecendo aqui para quem
ficou com dúvida eu teria que criar um arquivo chamado settings 2 retornando né uma uma componente aí e aí o nome dessa tela eu daria como o nome do arquivo settings 2 E aí sim tudo funcionaria lembrando né que o Export router ele é baseado na estrutura do nosso diretório então a estrutura do diretório ali dos arquivos os nomes dos arquivos arquivos ele usa tudo isso para configurar o navegador por isso que nesse caso aqui eu tô falando que a gente precisaria criar um um arquivo Tá mas vamos voltar aqui pro que a gente estava
falando que eram as cores né as cores ativas e inativas que são as os tint Colors né que ess que seria essas cores primárias aí e eu tenho também o Active background color né então eu consigo controlar a cor principal ess que seria essa tint color a cor primária ou algo do tipo e eu consigo também controlar o background color que é a cor de fundo então se eu defino aqui ó Tab bar Active background color como por exemplo Amarelo isso vai ficar muito bonito Olha lá a aba que eu estou presente vai ficar com
a cor de fundo amarela né a e lembrando né que a nosso Tab bar ele é composto por diferentes itens né onde cada item é uma aba quando eu defino o tab bar Active background color né a cor ativa a cor de fundo ativa né do eu tô definindo eu tô definindo essa cor de fundo ativa do item né por isso que só ficou Amarelo aqui o item referente à tela inicial se eu venho para para ajustes né só vai ficar Amarelo aqui a cor referente ao item que representa a nossa tela e a nossa
aba de configurações e da mesma forma que eu tenho o Active background color eu tenho inactive né que é a cor de fundo do item da Aba que não está ativo que eu vou passar por exemplo Azul ó que beleza então o item que eu não estou presente ele vai ficar com a cor de fundo azul por conta do Tab bar inactive background color tá então a gente consegue usar essas quatro propriedades aqui para controlar as cores aí do nosso Tab bar certo uma outra opção que nós temos aqui que essa também faz sentido definir
aqui em screen options que é o tab bar né o Hide on keyboard isso aqui é um boleano eu vou deixar como falso e qual que é o comportamento né aqui em home eu coloquei o input tá e a quando eu clico nesse input esse input deixa eu abrir aqui na tela home né é basicamente é o text input do react Native e eu passei aqui alguns estilos para ele foi só isso Eh quando eu clico no input que ele abre o teclado o nosso Tab bar ele vai ficar visível né Por padrão ele fica
assim e eu mas eu posso definir aqui o Hide como true E aí quando eu clicar no input o nosso Tab bar ele vai eh se ocultar né Tem uma animação aqui dele se ocultando e quando eu tiro o teclado da tela o tab bar aparece novamente tá então a gente consegue controlar aí a exibição ou não do nosso Tab bar dependendo do teclado se o teclado aí do dispositivo está sendo exibido ou não tá e as outras duas opções que eu tenho definido aqui na verdade né tem uma outra opção que eu quero mostrar
para vocês que é o tab bar Button que basicamente né quando eu falei aqui que o tab bar que é a barra né de Abas ela é com posta por itens cada item é um botão né porque ele tem que receber o evento de clique né tem que reconhecer ali quando o usuário clicou Então como ele é um botão por padrão o o o react navigation né o Expo router ele vai usar o pressable né pressable é um elemento do react Native e o pressable ele não tem animação nenhuma né a gente simplesmente clica ele
faz um sonzinho de clique e que a gente consegue perceber mas ele é o mais simples E aí por exemplo se eu quiser usar um tob Pest né que é aquele carinha que tem um elemento um animação né de clique de opacidade quando eu quando eu pressiono ele tem uma certa animação eu poderia fazer isso usando o teb bar Button então isso aqui vai ser basicamente um componente que vai retornar um elemento visual que é o elemento visual que vai ser usado como botão da nossa do Do It né do nosso Tab bar então cada
botão ele tem as suas propriedades tá E essas propriedades elas são basicamente os eventos do botão né quando clicar no botão vai acontecer o quê né no caso eu ia Navegar para uma tela o botão ele tem qu quais estilos né como que ele vai ser posicionado qual a largura dele todas essas configurações o próprio react navigation né o Expo router gerencia pra gente e aí quando eu crio né quando eu defino aqui o tab bar Button todas essas propriedades são enviadas para mim Eh como parâmetro dessa função tá e a única coisa que eu
vou fazer aqui é repassar essas propriedades para um touchable Pest então aqui eu vou retornar né dessa minha função desse meu Arrow function uma componente que é o table opacity eu tenho que importar o top Pest do react Native tá então aqui ela é uma componente self close e aqui eu vou repassar a as propriedades né fazendo o spread aqui das propriedades nessa minha componente do touchable Pest E aí quando eu salvo isso e clico né nos ícones Agora sim ele já vai ter os os atributos aí né as animações a vai ser uma outra
componente que tá sendo usada como botão e no caso aqui é esse touchable opac tá então a gente consegue fazer isso também beleza e aí Além disso outras duas coisas que eu tenho anotado aqui é o tab bar item Style que é o estilo de cada item né então se eu definir por exemplo um uma borda né border wiit de um pixel ele vai aplicar a borda em cada item né do meu da minha barra aqui de Abas tá e eu tenho também além de conseguir controlar o estilo de cada item eu consigo também controlar
o estilo de toda a barra né então que é o Style né o Style e aqui por exemplo se eu definir um border de um Piel ele vai aplicar a borda em toda a barra n essa opção esse estilo aqui da Barra inteira ele é um pouco estranho de mexer é um pouco difícil de controlar isso por exemplo eu posso definir um background color backg vai funcion perit vai apar de to a barra mas algumas propriedades mais referente à largura altura essas coisas a gente tem um pouco de dificuldade de est definindo isso por aqui
tá mas a maioria dos estilos aqui vai fazendo efeito a gente vai conseguirar uma coisa ou outra aí usando essa propriedade também tá certo então essa aula aqui É ISO eu eso aí que ten ajudado qualquer dvida pode estar deixando um comentário aí logo abaixo e é isso aí muito obrigado e até a próxima a [Música]
