Na prática: Navegadores aninhados

fala Mestres beleza no vídeo de hoje nós vamos implementar aqui o alinhamento né navegadores alinhado no nosso caso Aqui nós temos navegador em Abas né o tab naveg e nós vamos alinhar com o stack Navigator Beleza então antes da gente ir pro conteúdo gostaria de pedir que você deixe um like no vídeo se inscreva no canal e também nos acompanhe nas redes sociais os links estarão todos aí na descrição meu nome é Janer eu sou desenvolvedor aqui na Mestres e bora lá para mais um conteúdo [Música] então aqui no nosso projeto né o nosso projeto

de exemplo nós temos implementado aqui e nós fizemos isso na aula passada que foi o o nosso Tab Navigator né juntamente a gente criou aqui a tela de configurações a gente até ocultou ela né aqui da barra de opções do do Tab eu vou voltar ela vou tirar aqui o HF para ela aparecer aqui no nosso na nossa aba né no nosso Tab naveg e Aqui nós temos né um três telas no nosso registradas né no nosso navegador então o que que nós podemos fazer aqui eu eu vou criar na verdade e vamos imaginar o

seguinte que nós temos a tela de perfil e dentro da tela de perfil nós queremos ter por exemplo uma edição de perfil né quero poder editar aí um um perfil na nossa na nossa aplia então se eu vier aqui ó vou criar aqui um Edit tsx né que vai ser aí uma componente Então vou copiar aqui a componente que nós estamos usando de exemplo que é basicamente um vi com texto Centralizado vou trocar o nome aqui ó para Edit profile o nome da componente no nosso texto vou dar um Hello from Edit profile certo basicamente

exportar essa essa componente tá então Criei um arquivo criei a componente certo eu não vou registrar ela aqui no meu tab naveg ator tá vamos manter ela aqui e lá na nossa tela inicial né que é aqui no nosso index que é essa tela que tá sendo exibido aqui nessa tela Eu tenho um input né esse input nós colocamos aqui para para para um exemplo né de alguma aula passada eu vou remover ele tá eu tenho um link aqui escrito escrito perfil né que basicamente eu tenho um HF que quando eu clico nesse link eu

navego pra minha tela de perfil tá então se eu criar um outro link aqui que aqui não vai ser mais para profile vai ser para Edit né Edit tsx ou ou tsx não né só Edit é só o nome antes da extensão aí do arquivo então se eu crio aqui eu vou dar um nome né de Edit quando eu clicar aqui na minha tela inicial né eu tenho aqui aqui o texto Edit né que é esse link quando eu clicar eu vou ser navegado para essa tela que eu criei só que o problema é que

ela apareceu aqui no meu tab Navigator né ela foi registrada no tab Navigator e mesmo sem eu escrever aqui no layout né a meio que declarar essa tela né e o o Expo router por si só ele já vai detectar ali os arquivos dentro do grupo que no caso aqui é o grupo tabs né ele já vai detectar tudo isso e já vai registrar no nosso como uma AB aí do navegador né quando eu escrevo aqui claramente essa quando eu registro né claramente aqui as telas que eu que eu tenho na aplicação é basicamente para

m personalizar para mim definir as opções o título que vai aparecer o ícone que vai aparecer pra gente conseguir personalizar mas em teoria eu não precisaria desse arquivo layout aqui ele ele já detectar aí as telas né E já Faria aí a nossa a criação aí do o registro né das telas na verdade Eu precisaria do do arquivo para falar que é um Tab naveg ator mas o registro das Telas ele já consegue fazer para mim tá mas esse caso aqui não nos ajuda né não o não resolve o nosso problema que qual que é

o problema Eu quero ter algumas telas na minha aplicação e eu não quero que essas telas apareçam aqui no meu menu inferior né com registrado como Abas E e esse caso da edição de perfil é um deles então o que que nós vamos fazer eu vou criar aqui um novo diretório chamado profile que vai ser basicamente aonde eu vou agrupar aí as rotas referentes a perfil né então o que que eu tenho referente a perfil a edição eu vou clicar aqui arrastar né para mover a edição de perfil e essa tela profile aqui também que

seria a tela inicial né de perfil então basicamente essa tela Seria onde eu entro ali no perfil do usuário e eu teria lá um botão paraa edição que navegaria para essa outra tela de edição então eu vou mover essas duas telas para dentro desse diretório E aí com essas duas telas aqui dentro eu vou renomear eh ou eu vou dar um nome de index né porque nós precisamos desse arquivo index aqui na estrutura de de diretórios então a tela inicial né que vai ser aí o a a tela inicial vai ser essa tela de perfil

né esse home aí do do perfil então eu vou renomear esse arquivo profile para index certo vou deixar aqui o edit e com essa estrutura eu tenho que ter também um arquivo layout tá underline layout então aqui dentro de profile vou criar ó underline layout E aí nesse arquivo né nessa declaração de layout a estrutura vai ser parecida com essa na verdade parecida com essa não né vai ser parecida com a estrutura do stack Navigator então eu vou até copiar ele aqui ó pra gente não perder tempo digitando eu vou chamar isso aqui de profile

layout né vai ser o layout aí referente ao perfil tá então para cada perf pro para essa minha rota perfil né para essa minha aba de perfil que eu tenho no meu navegador né no meu tab naveg eu vou registrar um stack naveg para essa aba então nas telas né o stack screens aqui eu vou ter uma tela que é a que é a tela inicial eu vou ter uma outra tela também que vai ser a tela Edit que vai ser essa tela de edição essas opções eu vou botar aqui o head para ele exibir

o cabeçalho pra gente entender melhor o que que tá acontecendo mas com essa estrutura criada o que que eu tenho n Na verdade essa estrutura aqui já resolveria então entendendo aqui melhor o fluxo né eu tenho aqui um Tabs vou fechar aqui o profile então o que que eu tenho né tabs Navigator aqui no layout onde eu registrei as minhas Abas uma dessas Abas é a aba perfil certo então quando eu Navegar para essa aba perfil ele vai me jogar dentro desse diretório aqui esse diretório ele tem um layout e o que que é esse

layout é um stack naveg ator então no stack naveg ator eu vou ter aqui a tela inicial que é a index e eu vou ter também uma tela de edição tá então aqui se eu já clico aqui em perfil ele já me navega ó cliquei em perfil na AB né no tab naveg ele me jogou para stack navegate como que eu sei que eu tô no stack navegate pelo cabeçalho né ele adicionou aqui um cabeçalho a mais que é o cabeçalho do stack naveg ator tá aqui com o nome da Rota e o conteúdo aqui

é o Hello from profile que tá aqui nessa minha tela index Hello from profile aqui dentro eu vou adicionar um link do Expo router e nesse link eu vou navegar para onde eu vou navegar paraa minha tela de edição se eu digitar aqui edit no link vamos fechar ele aqui ó botar o conteúdo aqui Edit se eu clique em Edit ele vai dar erro porque eu tenho que passar aqui meio que a estrutura ã o o pef ali né completo Ou seja eu estou em um Tab naveg ator do Tab naveg ator eu tenho que

Navegar tabs bar profile bar Edit Então seria eh profile Opa pressioni tecla errada aqui profile barra Edit se eu salvo isso e clico aqui agora em Edit ele vai me Navegar pra tela de edição e a gente vê que o stack navegate que ele até adicionou o botão de voltar né então com essa estrutura a gente começa a alinhar as coisas e e alinhando esses navegadores a gente consegue ter um controle muito melhor aí dessas dessas telas né e Vai juntando também as as otimizações que nós temos de performance para cada navegador então o stack

naveg ator por exemplo ele vai guardar ali o histórico de navegação né um histórico de rotas quando eu crio o stack naveg ator ele não vai criar as telas todas as telas que eu tenho registradas de antemão né De acordo eu vou clicando e navegando Ele vai carregando as elas então é uma coisa que tem bastante otimização a gente vai ganhar performance usando isso e vai conseguir também ter essa possibilidade de gerenciar melhor as rotas e fazer um controle melhor de tudo aí que diz respeito à navegação da nossa aplicação Tá certo então com isso

aqui criado eh tudo que nós vimos nas aulas anteriores sobre steack Navigator vale para cá também então tudo de personalização que nós vimos criação de cabeçalho personalizado tudo isso e vai valer e e vai de sua aplicação decidir Como que você vai tratar esses navegadores alinhados né se você vai ocultar o cabeçalho do navegador Pie que seria aqui o tab Navigator né deixar o cabeçalho só do stack naveg ator e e controlar ele criar um cabeçal personalizado e gerenciando isso aí tudo você vai decidindo como que vai ficar melhor o que que faz mais sentido

paraa sua aplicação e vai fazendo a implementação de acordo a gente viu aí nas aulas anteriores tanto sobre stech naveg ator quanto sobre o nosso Tab naveg Beleza então para essa aula aqui é isso eu espero que eu tenha ajudado qualquer dúvida pode estar deixando um comentário logo abaixo e é isso aí muito obrigado e até a próxima [Música]