Como Criar Tab Navigator?

fala Mestres beleza no vídeo de hoje nós vamos aprender como criar o tab Navigator né que é o navegador em Abas usando Expo router tá então antes da gente ir pro vídeo gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também acompanha a gente nas redes sociais os links estarão todos aí na descrição meu nome é Janer eu sou desenvolvedor aqui na Mestres e vamos lá para mais um [Música] conteúdo bom então eu estou aqui no projeto esse projeto eu basicamente apaguei todas as rotas que nós tínhamos aqui eu

deixei só esse layout né que seria o layout principal e a partir daqui que nós vamos começar a criar a estrutura do Tab Navigator né Lembrando que nas aulas passadas nós falamos sobre o stack Navigator e nessa aula aqui nós vamos usar ele tá a gente usa o navegador em Abas né o tab naveg em conjunto com o stack naveg tá então para que isso tudo funcione nós temos aqui na raiz né esse layout e para quem não se lembra aí esses arquivos layout eles são basicamente arquivos que a gente vai definir uma estrutura para

aquele para aquele conjunto de rotas né Sempre que eu tenho um diretório que seria aí uma um pef novo né no nosso navegador eu posso ter um layout diferente né e os layouts eles vão se agrupando dependendo aí da Rota que a gente se nave que a gente navega né então Dando um exemplo aqui só para contextualizar se eu tivesse aqui um diretório de pedidos né E pode ser pedidos né então seria um e-commerce que nós teríamos os pedidos né então eu teria aqui um diretório de orders né E aqui dentro se eu tivesse um

outro layout o layout quando eu navegasse né Para orders né então seria lá no nosso na hora de Navegar né eu daria um barra orders barra algum arquivo que eu tivesse aqui dentro ou se eu fosse pro índice né pra pra home ali a tela inicial ele aplicaria esse layout aqui que eu estou definindo né então a gente pode pensar no layout como Como de fato essa estrutura externa então se eu quiser que toda tela temha um título eu definiria esse título no layout E aí todas as telas que tivessem dentro desse diretório estariam compartilhando

teria ali aquele título que eu defini tá então nós vamos partir dessa ideia para tá fazendo aqui o nosso o nosso navegador em em Abas né o nosso Tab Navigator porque qual que vai ser a ideia aqui a gente vai começar criando um um diretório chamado tabs que vai ser essas Abas só que o detalhe aqui é que tabs vai ser um diretório com com parênteses né então os diretórios com parênteses aqui no Expo router eles são diretórios E tem também vídeo aí no canal sobre isso eh são diretórios são um grupo de rotas né

então se eu quero agrupar as rotas eu agruparia usando aí esse diretório com parênteses então quando eu fosse na navegar para algum desses diretórios para alguma dessas rotas né dentro desse grupo eu eu omitia eh esse tabs aqui então se eu tivesse aqui por exemplo um um um um uma rota né eu vou criar um novo arquivo aqui eu vou chamar de settings então settings aqui ela ela faz parte do grupo tabs né mas quando eu fosse Navegar ou quando eu fosse abrir essa rota aqui num browser por exemplo se eu tivesse usando e o

Expo web eu só teria lá o meu domínio barra settings que seria referente a essa rota aqui tá então o grupo é basicamente uma forma da gente realmente agrupar e omitir da URL o o nome ali do diretório que eu usei para agrupar tá então eu vou ter esse diretório tabs aqui e no meu layout eu vou continuar tendo um stack Navigator só que a diferença aqui é que nesse stack Navigator eu vou Definir rotas né então eu vou abrir e fechar aqui as minhas tags né E aqui dentro eu vou definir um stack stack

screen né Vou definir uma tela e qual que é o nome dessa tela o nome dessa tela é o nome do nosso grupo ser seria tabs tá então quando eu faço isso eu tô basicamente falando pro pro meu stack naveg ator que é para ele renderizar nessa tela que no caso eu só vou ter essa tela né que seria a tela de tabs mas caso eu queira ter outras telas na minha aplicação fora do Tab Navigator E aí tem que ser um caso muito específico você poderia listar essas outras telas aqui né com nomes diferentes

e aí os nomes seriam os nomes dos arquivos né enfim para você conseguir navegar para essas telas Mas o foco aqui agora é só os tabs então quando eu faço isso como eu só tenho uma rota quando o meu aplicativo iniciar ele vai navegar direto para essa rota né então para esse grupo de rotas né então dentro desse grupo de rotas que seria o nosso diretório tabs eu vou criar aqui dentro um layout tá underline layout tsx e dentro desse layout que eu vou configurar de fato o meu o meu tab naveg ator né como

que eu quais opções eu quero exibir ali no meu tab Navigator eu não tô com aplicativo mostrando aqui porque ele vai tá dando erro né porque a gente tem que configurar esse essas rotas iniciais aqui para ele conseguir ser renderizado tá então o que que eu vou fazer aqui eu vou basicamente declarar aqui uma função né eu vou chamar isso aqui de Tabs isso tabs layout e aqui eu vou retornar os tabs né eu importo tabs do Expo router tá então quando eu faço isso basicamente eu estou criando um Tab Navigator e aqui dentro dessas

tags eu vou definir quais Abas que eu quero que a minha aplicação tenha tá então para definir essas Abas aí eu vou usar o tabs screen né eu vou criar aí registrar né telas pro meu pra minha para que serão referente a essas a essas Abas né então para cada Tab eu tenho que definir também um nome que seria o nome do arquivo que eu vou querer da Rota né que eu quero referenciar que está dentro aqui desse meu grupo tabs então eu tenho aqui settings eu vou criar duas rotas né eu vou criar um

novo aqui ó chamado home então aqui no meu layout eu vou ter a tela home e eu vou ter uma outra tela que vai ser a settings certo então aqui nos arquivos né referente a cada rota eu vou colar aqui um uma tela extremamente simples que tem basicamente um texto certo uma View com text dentro Centralizado só pra gente ver de fato um conteúdo alterando aí quando a gente navega de uma tela PR outra então eu tenho aqui o home Tab e eu vou ter aqui também o settings Hello from settings então salvo isso aqui

tudo salvo o arquivo aqui das Abas salvo o meu App e aqui eu já posso vir pro meu emulador ele vai dando erro eu vou recarregar ele aqui o meu vou parar aqui o servidor do expo e vou rodar de novo né npm start ele vai iniciar aí o Expo vou botar para abrir no Android para ele carregar e fazer de novo aí o build desse meu da minha aplicação Então feito isso ele já deu ele deu aqui o de rout e até interessante que ele deu esse erro porque eu já explico isso para vocês

porque o que que acontece nessa estrutura do Expo eu acredito que isso seja um bug Mas a gente sempre precisa ter dentro aqui dos nossos tabs dos grupos né um arquivo index index.tsx tá então o que que eu posso fazer aqui eu posso poss simplesmente converter o meu o meu home para index né que vai ser a tela inicial que é a ideia do do Index né para ele ser ali o início e aí você pode me perguntar né o por que o Expo sempre procura por esse index e realmente eu acredito que seja um

bug porque não tem muito motivo para isso tá não tem nada documentado em relação a isso basicamente que ele procura sempre que ele entra aí nesse nesse diretório um arquivo index né Aí como não tem ele tava dando aquele erro então aqui no tab screen né o nome da Tab vai ser index e o outro aqui vai ser settings eu vou recarregar o app aqui só pra gente ter certeza que não tá dando erro e como a gente pode ver já tá tudo sendo exibido aqui tá então o que que a gente já pode começar

a ajustar aqui o nosso stack naveg ator ele tem um cabeçado que é aqui onde exibindo TS n então eu posso ocultar esse cabeçalho somente aqui na tela nesse grupo n então aqui eu tenho option n e dentro de options eu posso passar [Música] o exibir como falso E aí o cabeç vai sumir cabealho do naat layout Tab que que eu posso fazer eu posso definir algumas opções tá então nessas opções Eu posso passar por exemplo o aqui a gente pode olhar né que que a gente pode definir específico para essa tela a gente pode

controlar aí o o cabeçalho né la load tem aqui opções do Tab bar né E tem temos o título também então o título dessa tela aqui seria home ou início né e ele vai trocar ali no cabeçalho para início e também aqui embaixo né no tab navegador se a gente dar uma olhada aqui nós temos aqui né o navegador em Abas né quando eu clico eu vou para settings né Deixa eu passar esse options aqui também para settings seria configurações n bem grande né ajustes e ele vai exibir aqui para mim então com esses dois

aqui exibidos eu posso por exemplo definir aqui ó o tab bar icon né um ícone aqui pra minha aba e eu já tenho até uns ícones separados aqui ó que eu já deixei pronto pra aula pra gente não perder tanto tempo digitando tá então título o ícone eles são do fonte aome né a família deles então a gente importa aqui do a família de ícones E aí no tab bar icon né eu passo um ícone que seria que vai ser exibido aí aqui no meu na minha Tab né no meu no meu menu inferior aqui

então para para início eu tenho o home né que seria o ícone da casinha e ajustes o ícone aí de configurações tá então basicamente algumas das opções lembra bastante com o que nós vimos lá no stech Navigator né as opções do navegador em si da tela tem algumas coisas diferentes que é referente ao ao nosso Tab bar tá então nas próximas aulas a gente vai estar falando mais sobre aí como que a gente pode estar personalizando esse nosso navegador em Abas Beleza então para essa aula é isso eu espero que eu tenha ajudado qualquer dúvida

pode deixando um comentário logo abaixo e é isso aí muito obrigado e até a [Música] próxima n