Navegação com Expo Router - Crie Seu Projeto de Navegação do Zero!

Fala mestre beleza no vídeo de hoje a gente vai ver aqui como funciona a gente vai iniciar né a configuração aqui do nosso Expo Walter né No final da aula a gente já quer ter uma tela ali já criada e entender basicamente ali Como funciona essa questão da navegação Nativa Nativa entre aspas né do próprio Expo tá nós temos também a forma de Navegar usando o próprio react navigation que eu vou eu vou trazer esse conteúdo aí nos vídeos futuros Tá mas agora a gente vai ver essa configuração aqui no nosso projeto usando o x power Beleza então antes da gente ir pro vídeo não eu gostaria de pedir que você deixa um like no vídeo se inscreva no canal também clica aí no Sininho para o YouTube te manter atualizado aí dos nossos conteúdos e também né acompanha a gente nas nossas outras redes nas redes da mestre que vai estar tudo listado aí na descrição Beleza meu nome é jeans eu sou desenvolvedor aqui na mestre e vamos embora lá para mais um conteúdo [Música] bom então antes da gente fazer a própria configuração aqui do expor alto né eu vou explicar aqui um pouco do qual que é a ideia por trás do Hector porque a gente está falando desse conceito lá no nosso curso de Next né o Next na versão 13 ele introduziu aí uma ideia parecida Na verdade ele já tinha né esse conceito aí dessa da estrutura de navegação que a gente vai ver que no x mas eu vou estar repassando isso aqui para quem não viu ainda ficar sabendo mais ou menos aí entender né O que que a gente vai estar fazendo na verdade como que é estruturada né porque no Expo né o Apple rooting ele vai ter uma ideia de navegação que é baseada na estrutura né um file System base de baseado na estrutura que a gente organiza os arquivos e cria diretórios no nosso projeto Então a gente vai treinar o diretório app né que vai ser aonde a gente vai estruturar essa navegação e se dentro eu criar um arquivo index né um arquivo index tsx a gente vai ter ali uma rota né que vai seria o equivalente a rota Barra quando a gente acessa na web né quando está programando web então lá na web quando a gente acesse louco o arroz de 3000 né que é a raiz ali do site seria esse index tsx que a gente criaria dentro do diretório web então se dentro do diretório app ou criar ali um diretório user e dentro de user eu criar um arquivo na indextsx a gente vai ter a rota né barra e user que vai vai ter Ali vai entregar para a gente esse conteúdo então é uma ideia baseado realmente muito muito similar com a gente tem na web né só que o jeito de configurar na web né antigamente na verdade é fora do Next né a gente fazia usando é configurando ali cada PF né Cada o Barra alguma coisa ali para ser para entregar para a gente um conteúdo já que não né no next 13 e next 13 não né Vamos falar no next em si e agora no exploration a gente tem essa ideia aqui do da navegação baseado no na estrutura do diretório né então os nomes que a gente dá para os diretórios né e os arquivos que a gente cria ali dentro que vão descrever Quais as rotas que o nosso ep vai ter Tá certo e então aqui no Expo né eu vou vir aqui para o projeto a gente já começa na verdade na documentação né ele vai essa documentação essa forma de configurar vai mudando de acordo o a nossa versão da SDK do X né então que a gente tá com 48 eu não documentação né agora que eu estou gravando já tem o x por 49 né E tem algumas diferenças aí da configuração então eu vou recomendar né caso você esteja vendo esse vídeo aí muito no futuro para que você eu vou deixar né na descrição aí o link né da documentação do ex para você tá acompanhando para ver se teve alguma alteração ou não da forma de configurar que provavelmente já vai ter sim tá então a gente já começa aqui é configurando o ponto de entrada do nosso projeto né Porque até então aqui no pack Jason né esse essa propriedade Man que seria basicamente onde a gente define é o ponto de entrada da nossa aplicação que tá dentro da nude models né dentro do pacote X por esse arquivo aqui é entre. js Tá então a gente vai mudar isso aqui para um arquivo JS que eu vou criar aqui né então eu vou digitar que o ponto de entrada é um arquivo index JS tá E aqui eu vou criar esse arquivo chamado index. js e aqui dentro a gente vai importar né o módulo que é o nosso o Expo Walter né tá é esse pacote que a gente precisa mas antes né a gente precisa fazer a instalação das dependências né que a gente tem várias dependências aí que essa esse esse pacote nessa funcionalidade de navegação do Expo é construído em cima do react navigation tá então a gente tem que instalar bastante bastante dependências e algumas delas é as mesmas que a gente instala que a gente usa que o próprio react navigation usa tá então eu tô eu tô aqui com a documentação aberta na outra tela eu vou copiar aqui essas dependências eu vou abrir aqui Vou terminar e vou colar né então a gente vai usar npx né Expo install para o a gente usa né o eco sempre para instalar aqui no nosso projeto porque ele já instala as versões corretas dependendo da nossa ssdk então a gente usa né mpxk que foi instinto CF é contact que é que nem stream screens né expo-link expostantes e Xbox E também o gestorendler para ter aí um certo nível e controle de gestos Então vou dar um enter aqui para ele instalar isso aí vou salvar esse arquivo JS né e enquanto ele instala aqui né vai instalar as dependências aqui no nosso pack Jason tu vai continuar aqui com essa configuração tá então agora a gente já vai vir aqui para o arquivo app.

jay né que é um arquivo aqui onde a gente configura esse projeto Expo para ele funcionar e diferente plataformas ou até configurações Gerais né que é o caso aqui na verdade não é bem o caso porque aqui tem a configuração do Web né que seria aqui na propriedade web eu adicionaria aqui o banner né Opa aqui eu tenho a propriedade banda que esse banner aqui é o método tá então o que que é isso né Porque que a gente define que essa propriedade ou esse bander e na documentação também ele define o esquema né aqui no nosso a gente não tem esquema ainda eu vou deixar isso aqui que que é o mais app e basicamente O que é isso né o banner seria basicamente o esse não é bem o interpretador de código mas essa ideia de banda é o que vai mudar fazer o build ali Desse nosso código JavaScript é esse esquema esquema não né é o que define lá quando a gente está trabalhando com Deep link né que seria basicamente aí a gente pode entender isso aqui como o entre aspas domínio tá quando a gente vai navegar para algum site por exemplo a gente tem lá né htps Né que é o protocolo dois pontos barra barra alguma algum site né nesse caso aqui esses crime você ficaria no lugar desse protocolo mas não é um protocolo né que é basicamente o que vai identificar a nossa aplicação quando a gente for fazer um Deep link né então quando gerar lá o link com my app barra alguma coisa ele vai identificar através do Skin que my app é esse app que nós estamos desenvolvendo E aí você pode estar no iOS você pode estar no Android ou na web né que que seria também disponível esse link redirecionaria para nossa aplicação né para o nosso navegador que a gente vai estar estruturando ele aqui ainda tá então aqui a gente certa essas duas e lá no Bebel Bebel que também né como eu expliquei lá na primeira aula ele também faz essa parte aqui de Build de interpretação do nosso código de transformação do código para outros formatos aqui também a gente vai adicionar um plugin né então Aqui nós temos aqui a propriedade plugins aqui é uma rei né uma lista de Strings nesse caso aqui O plugin que a gente vai usar é o Expo router E aí com isso né no nosso caso aqui como a gente tá usando um stk48 do Expo né a gente tem que definir aqui no próprio Pet Jason uma propriedade que é overwatch que é basicamente é basicamente a gente falando para o npm eu vou até copiar isso aqui ó para não ter que digitar isso aqui é basicamente a gente falando para o npm que sempre que ele for instalar ou resolver algum pacote né no caso que o metro e o metro resolve ele instalar exatamente essa versão 076 que é a versão do metro compatível com o esse Expo né com ssdk 48 Beleza então a gente tem que fazer isso aqui também por conta se eu tivesse na versão 49 por exemplo não precisaria disso a versão da SDK Beleza então com isso aqui que que eu vou fazer eu vou já vou rodar o projeto então que eu vou dar um npm start né para ele iniciar aqui o metro iniciar o banner que já começar a construir aqui o nosso app aqui ele deu um erro tá porque como a gente está configurando esse navegador e esse esse halter né e eu vou estar chamando aqui de navegador e esse navegador do Eco ele também funciona para web ele tá pedindo aqui para eu instalar né o reactive Web Nessa versão que 18. 10 então eu vou copiar isso aqui vou colar no seu caso Aí dependendo da SDK da ex do ex ele pode pedir ou não para você fazer essa instalação ou se pode pedir também mas é só copiar que igual eu fiz né e colar e pedir para ele fazer a instalação que ele vai fazer Tá certo então com isso que instalado né eu vou tentar rodar de novo o projeto ele vai rodar isso aqui E com isso né o nosso o nosso aplicativo já vai abrir eu vou pressionar aqui a tecla a para ele abrir no Android né o meu emulador Android aqui tá rodando é o emulador Android que ele tá rodando e tá aqui né ele já carregou para mim é que eu tô ficando na frente né eu vou sair daqui para cá Beleza então aqui né ele já carregou o aplicativo né com essa tela padrão aqui e pedindo para mim criar né um arquivo no diretório app então aqui na raiz do projeto eu vou criar aqui um novo diretório chamado E dentro dele eu vou fazer aquilo que eu disse eu vou criar arquivo index .