fala Mestres Beleza o vídeo de hoje nós vamos falar aqui sobre o stack Navigator nós vamos entender o que que é de fato o stack Navigator e ver as opções que nós temos aqui para configurá-lo 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 bora lá para mais um conteúdo [Música] bom então na aula passada nós falamos sobre
a criação do app router né que é uma forma de Navegar baseada aí no File System que seria na forma que nós organizamos os arquivos e nós começamos a usar né o stack né que seria o stack Navigator mas eu não falei nada sobre ele não nós vamos entender melhor o que que ele é e a diferença dos outros navegadores que virão em aulas futuras A partir dessa aula tá Então esse stack naveg ator eu gosto de fazer a comparação com um baralho de cartas onde cada tela seria uma carta e sempre que eu quero
renderizar uma tela Eu Vou Pegar a carta independente da posição que ela tá dentro ali da da pilha de cartas e vou jogar para cima né então e vou colocar ela em cima né então se eu tenho três cartas né E que seriam três telas né e eu quero renderizar a tela que tá por último eu tiro ela de baixo e coloco em cima E aí sempre que eu vou renderizar sempre a tela que está sendo exibida ela vai ficando por cima dessa pilha e baseado nesse histórico de movimentos né a gente consegue ter a
operação de voltar tá então o stack Navigator ele vai funcionar basicamente em torno dessa ideia tá então quando eu quando eu escrevo aqui né quando eu escrevi aqui o nosso do nosso layout né E esse layout retorna um stack eu tô informando que eu quero usar um stack Navigator para gerenciar as rotas aí da minha aplicação então na aula na aula passada né onde nós estruturamos aqui o app router eu expliquei mais da estrutura de tudo isso aqui então aqui a gente vai focar de fato no stack navegador tá no navegador em si Então esse
navegador nós podemos ver esse comportamento né quando a gente navega a gente vê que ele grava ali o ele exibe na verdade a rota que está sendo renderizada no caso a inicial aqui que é o n do arquivo né index.tsx no caso a extensão ele não pega mas ele pega o nome então o index aqui que seria a raiz aqui da minha aplicação quando eu clico em Navegar nós estamos navegando para uma para uma rota dinâmica né Então tá aqui dentro de orders list id e eu faço essa navegação através desse botão né handle press
que eu basicamente faço um push né eu empurro eu envio essa navegação para essa rota né que seria iia o a parte dinâmica né que é o que está que seria que vai ser renderizado nessa Rota e a gente indica isso pelo colchete ID tá então a gente tá fazendo essa navegação ele tá indo para um arquivo diferente ele tá exibindo para mim aqui no cabeçalho do navegador o arquivo que está sendo eh renderizado né que está sendo interpretado Então essa estrutura já aqui com esse cabeçalho o nome da Rota e quando a gente navega
ele faz o animação eu tenho a opção de voltar aqui né se eu clico na setinha eu navego de volta eu tenho aqui também o botão de ação do Android né se eu aperto ali para voltar também ele volta e isso aqui já é a estrutura do stack naveg ator né o stack naveg ator por padrão ele já vai funcionar assim e aqui dentro do stack Navigator eu posso definir opções tá E essas opções Elas serão ã a gente consegue configurar né Como que o nosso navegador ele vai se comportar se eu pressiono aqui né
um control espaço para ele me sugerir eu já tenho aqui algumas sugestões e a maioria das opções que a gente vai vai mexer né seria aqui em screen options né que é a configurar as opções das Telas e nós temos aqui também o initial route name que seria a rota Inicial nosso aplicativo ele vai iniciar em qual rota em qual tela a gente pode passar aqui também essa rota Inicial e e basicamente esses dois que nós configuramos mais aqui tem uns listeners também que é pra gente ouvir eventos que são essas três opções que nós
temos mas quando a gente entra aqui em screen options eu posso passar um objeto de opções tá então a sintaxe aqui né eu abre e fecho Chaves por conta do screen options e abre e fecho Chaves de novo por conta aí de de eu tá enviando um objeto e aqui eu tenho várias opções tá eu consigo configurar a barra de status né o título orientação da tela ã navigation bar né a barra de navegação opções do header que seria o cabeçalho em si né e o que que vai ser renderizado na direita ou na esquerda
do do do cabeçalho né e aqui a gente usa isso para renderizar botões por exemplo então nós temos várias opções opções de gestos né animações então tem muita coisa aqui que a gente consegue configurar que diz respeito a a o stack Navigator e a tela tá então o que que a gente pode fazer aqui né Vamos brincar aqui com algumas opções por exemplo nós temos o header Style que é basicamente para mim definir o estilo do meu header né então o header ele é uma componente a gente pode pensar nele como uma componente esse cabeçalho
e aqui dentro eu posso definir a cor de fundo desse meu cabeçalho né então ele tá até sugerindo aqui aqui para mim definir o Yellow Vamos definir Preto para diferenciar porque já tá amarelo aqui né o a tela inicial então eu consigo aqui definir a cor de fundo desse meu cabeçalho eu consigo também definir esse header tint color que seria a cor do tint esse tint né Sempre que a gente vê esse tint aqui se refere ao a gente pode pensar como a cor primária né então a cor primária do cabeçalho que seria é no
caso que que ela vai se replicar em alguns locais da aplicação e o no exemplo aqui é no no título né o nome da Rota eu tô passando branco e ele tá aplicando essa cor né como cor primária aí do navegador e temos também o header ã a gente pode vamos ver aqui o que que eu consigo fazer né o header que a gente consegue brincar aqui ó o title Style né que seria o estilo do título então aqui eu consigo definir a cor o estilo de fonte o tamanho da fonte e o peso da
fonte né dessa que seria essa fonte aqui que vai exibir o título aí da Rota né o título da tela a gente consegue brincar com esses valores e enfim personalizar Praticamente tudo aqui do cabeçalho inclusive o cabeçalho inteiro né então aqui eu tenho a opção header que eu posso passar uma função e essa função ela pode retornar uma componente aqui eu posso retornar um viw com texto deixa eu importar isso aqui a Vi do react Native text também do react Native E se eu salvo isso aqui a gente pode ver que ele substituiu o cabeçalho
inteiro né Eu estou nesse momento aqui eu estou enviando eu estou criando uma componente minha do meu jeito do jeito que eu quiser ali e aí eu posso implementar animações botões funcionalidades nesse cabeçalho da forma que eu bem entender então deixa eu esse texto aqui pra gente ver melhor o header ali a gente pode ver que tem nós temos o texto né header se repetindo várias vezes que é o reflexo aí da nossa componente e essa função header né que retorna a componente ela recebe aqui algumas propriedades que seria né o navigation options route e
esse back que é opcional basicamente esses caras aqui navigation nós vimos na aula passada que é a função que a gente usa para options seria as opções da tela então quando eu navego para uma tela eu consigo definir opções nós vamos ver isso aí mais pra frente mas essas opções eu recebo aqui como parâmetro da tela que eu estou renderizando no momento o rout que seria a rota e esse back seria a função para voltar né voltar aí um uma tela eu vou fazer um console log aqui ó de navigation porque navigation vai ter a
vai ter uma função ali vou fazer de options e route Vamos abrir aqui o console e a gente pode ver ó options nós temos aqui como que ficou esse Log em options eu tenho header V fazer o seguinte fazer dois logs diferente melhorar a visualização aqui isso no no nas minhas opções né eu tenho uma função header e nas na no objeto de Rota né eu tenho aqui informações da Rota atual tá então basicamente com com essas com essas duas informações eu consigo saber qual tela que eu estou renderizando e quais as opções que essa
tela recebeu para eu implementar alguma lógica que me interesse dependendo aí do que que eu estou tentando implementar no meu cabeçalho Tá mas o fato é que a gente consegue controlar tudo isso aí a gente consegue controlar o cabeçalho por inteiro ou ã partes dele né que seria quando a gente define aquelas opções que eu mostrei aqui pra personalização Tá certo eu vou deixar comentado para voltar o header original e não ficar e esse header aqui Que Nós criamos com vários textos repetidos E com isso aqui feito né com esse depois a gente vê que
a gente consegue né e personalizar o header vamos aqui para uma tela vamos aqui pra tela inicial mesmo porque nós temos essa lógica aqui para configurar o o o header em si ou as telas em si mas isso aqui é de uma forma geral né E esse screen options ele vai aplicar em todas as telas e às vezes eu quero fazer uma configuração específica para uma tela específica e a gente consegue também fazer isso ã de forma individual tá então quando eu venho aqui paraa home né que seria a tela inicial que é essa tela
que está sendo renderizada aqui quando eu retorno o a componente em si eu posso retornar além da View eu posso importar aqui ó o stack do Expo router tá stack do Expo router e eu dou um stack p screen tá quando eu faço isso eu basicamente eu vou definir informações específicas da tela que eu estou ã trabalhando para essa tela aqui que está sendo renderizada tá então dentro de stack screen eu posso por exemplo aqui quando eu dou um contol espaço né Nós temos aqui algumas propriedades que eu consigo definir mas dentro de options eu
posso definir por exemplo o título e Aqui ó pode ser home home screen e quando eu salvo o título da tela vai trocar né saiu de index que era o nome do arquivo para o título específico do do nome dessa tela aqui que está sendo renderizada então eu consigo definir e aqui dentro de options nós temos basicamente as mesmas opções que nós tínhamos lá no nosso stack no screen options né do stack na raiz aqui do layout então eu consigo também fazer essas configurações individuais para cada um aí dos nossos dos nossos das nossas telas
Tá então vamos vir aqui por exemplo no na tela que nós estamos navegando né que seria o ID aqui o Order ID né a listagem de ordens por ID que foi o exemplo que eu dei e aqui nós podemos fazer essa configuração definir essas opções de uma outra forma que seria usando o Hook use navigation tá com use navigation a gente chama isso aqui assim ó const navigation vai receber né o US navigation e dentro de um user effect que nós vimos né que o use effect ele vai ser executado baseado aí na nossa nossa
rede dependência né Sempre que a rede de dependências mudar ele vai executar né uma nova vez então eu passo navigation como dependência que seria o que eu estou recebendo aqui do Hook use navigation E aí dentro desse use effect eu posso fazer o navigation ponto aqui nós temos né algum algumas opções relacionadas a a navegação e eu tenho eu tenho aqui um set options que é para definir as opções ã de navegação dessa tela que ele está que eu usei né o US navigation ou seja essa Order ID então aqui dentro eu posso definir por
exemplo um header sh falso tá quando eu faço isso ele a gente pode ver que aqui nós não temos o sugestão tá a tipagem a tip ela não tá definida dentro do Set options né Ele é um objeto parcial um objeto que pode pode conter qualquer informação então aqui fica mais difícil de setar essas opções porque a gente precisa saber de fato o nome das propriedades de cor né meio que no JavaScript ali vanila hum Nem nem no JavaScript vanila nem nem assim né seria esse esse o seria assim né sem tipagem nenhuma mas o
fato é que com set a gente precisa saber exatamente o que que eu preciso definir obviamente com typescript também com com o outro exemplo né da stack stack P screen Mas o que eu quero dizer é que é muito melhor quando a gente tem o typescript ali para no sugerir para nos guiar do que quando a gente não tem mas funciona da mesma forma né quando eu defino aqui esse head falso se eu navego pra tela a gente vê que o header sumiu né que é o que essa propriedade faz né O header shown vai
definir E se a gente vai exibir ou não se eu voltar isso aqui para true ele vai aparecer de novo ali o cabeçalho para mim tá então a gente consegue dessas de diferentes formas né controlar aí o que como que o stack naveg ator vai se comportar para cada tela e basicamente esse resumo aí esse aí foi um resumo né de do que que é o stack screen do que que é né o stack naveg ator E como que as telas funcionam e se comportam nessa mistura do stack e também do Expo router tá E
lembrando tá que o Expo router né o esse stack Navigator que nós usamos aqui ele é basicamente a extensão do stack naveg da biblioteca react navigation tá então sempre que você tiver alguma dúvida ou quiser entender como que algo funciona tem a documentação do react navigation que lá a gente vai conseguir consultar tudo e o que que cada propriedade faz como usar as coisas e diferentes técnicas também para fazer algo aí para resolver alguns problemas que a gente pode estar tendo aí durante o desenvolvimento Beleza então para essa aula é 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]
