Resumo do Vídeo

Em vídeo passado a gente aprendeu a fazer o nosso componente, próprio componente, e a gente fez o componente funcional, Function Component. A gente escolheu para ser funcional em vez de ser um componente de classe porque esse componente que não vai manter estado. Seu papel é só desenhar alguma coisa, de renderizar esse template aqui. Tá bom? Agora, a gente já tem esse template, esse componente chamado primeira página disponível para o index aqui, como está funcionando aqui. Mas agora a gente vai introduzir o navegador. Vamos apresentar esse componente chamado Navigator. Vamos importar o navegador aqui no index e o navegador, o navegador, seu papel vai ser de controlar as rotas e vai escolher quais cenas serão mostradas, quais visões serão mostradas no seu aplicativo. Tá bom? Então a gente importou o navegador e vamos remover esse view aqui, tudo aqui que está sendo renderizado do componente principal do ponto de partida da aplicação. Vamos botar o navegador lá, tá bom? Assim. Mal, eu preciso de um propriedade. Então vamos falar do propriedade aqui. Primeiro propriedade, vamos botar um render scene propriedade. Essa render scene propriedade render scene é uma função que você tem que dar e essa função vai determinar que rota, que cena vai ser mostrada no aplicativo dependendo do parâmetro que é passado. Toda vez que você empilha ou desempira do navegador, vai chamar o render scene para determinar onde for, quando for empilhado uma nova rota, por exemplo, uma nova visão. Então vamos botar uma função aqui. Primeiro argumento vai ser route, segundo vai ser navigator, tá bom? Vamos com a função de flecha, ponha aí. Vamos deixar a função aqui, depois a gente vai mudar e mover essa função para fora e fazer a função própria para ficar mais organizado. Então quando você empilhar para o navegator, que a gente vai ver depois, a gente vai fazer assim, o navegador vai ser passado, vai ser injetado no componente, por exemplo, prevendo a página como uma propriedade. Então dentro da primeira página vai ter uma propriedade, tá bom? Dentro aqui tem uma propriedade que a gente se refere a desse, pra dar props, tá bom? Vai ter propriedade chamada navigator e com essa propriedade a gente vai poder, por exemplo, empilhar uma nova cena, nova view, tá bom? E a gente passa um objeto com os parâmetros que a gente vai ver. Por exemplo, a gente vai passar um id ou alguma valor que vai identificar a rota que vai ser passado, o componente que a gente quer usar para a próxima cena, próxima página. Por exemplo, a segunda página. Então esse aqui, quando a gente fizesse esse comando aqui, a gente diz para o navegador e navegador, eu quero que você, eu tô empilhando uma nova cena e o id é segunda página, então o navegador vai no render scene nessa função que a gente vai definir aqui e de acordo com o que é passado vai determinar qual é a rota que rota vai seguir. Então aqui vamos fazer um, esse objeto aqui, todas essas propriedades serão disponíveis dentro do render scene, dentro desse objeto chamado route, tá bom? Então se eu digo id aqui, segunda página, vai ser disponível aqui como id do route. Então vamos fazer um switch, por exemplo, com esse id e de acordo com o id a gente vai escolher que componente para mostrar. Então vamos botar um case. primeira página, por exemplo, ou eu posso pô, vou pô assim, primeira página. Pode ser qualquer nome que você escolha para a sua rota, vou escolher assim. Então botar um break aqui para não esquecer. Quando for chamar o render scene, que vai ser chamado toda vez que você chama ou empilha para o navegador, vai chamar essa função, essa função vai determinar aqui baseado no id para onde e qual componente desenhar. A gente vai retornar aqui o primeiro página, tá bom? Assim. Tá bom? Então para o navegador a gente tem que definir também uma rota inicial e initial route. E vamos passar um objeto, tá bom? Então mais uma chave. Com o id vou passar a primeira página para a página inicial. Tá bom? Vou salvar. Tá bom? Você vê agora o primeiro par de estar aqui, mas se não você vai ver direito, tá aqui. O problema é que não tem estilo, né? Eu tirei o estilo de tudo. Então eu posso pôr um estilo aqui nessa página? Por exemplo, vamos pôr um estilo só para ver, viu ou posso pôr um estilo navegador. Então vou pôr aqui. Pô, está. Vou botar um flex 1 e vou botar flex como é, quero tudo centro. Então este principal é o vertical, então eu quero tudo centralizado verticalmente. Vou ser justify content center. Vamos ver o que acontece. You can't find variable view, problema. O que é isso? Esqueci de exportar, né? Não esqueci, a gente introduzi o novo componente. Então importa o view aqui. E está aí. Tá bom? Vamos ver a primeira página. Então vamos recapitular o que a gente fez aqui. A gente tem esse componente chamado primeira página, que é o componente funcional que não mantém estado. Seu papel é só para mostrar a visão aqui. View, né? Eu fiz um view, botei o flex 1 para seguir o flexbox, estilo flexbox. Como o eixo principal por padrão no react native é o vertical, então para centralizar os itens dentro desse container, o view que é o texto aqui, eu uso o justify content para centro. Então aqui no verticalmente, os itens que estão contidos serão justificados no centro aqui. Tá bom? Então lá do index, vamos voltar, a gente define uma rota inicial. Tudo que a gente passa, esse objeto aqui dentro do initial route, é na verdade esse route aqui. A gente está passando o valor inicial dessa variável route, que vai ser chamada no Render Scene. Vai ter no Render Scene. Então primeiro, a gente quer mostrar a primeira página. Então esse id aqui vai ser disponível dentro da variável route dentro da Render Scene. A Render Scene tem dois argumentos da função. Tem o route e tem o navigator. Dentro do route, qualquer coisa que você passe nesse objeto aqui do initial route, nesse caso eu pus id, pode ser qualquer coisa, pode ser identificação desse caso e seria disponível no route.identificação. Tá bom? Erra bitrário, você pode escolher qualquer coisa. Se escolher id para deixar mais claras coisas. Então quando você fala ok, ok, navigador. Navigador vai ser que é a minha rota inicial, vai chamar o Render Scene. E dentro do Render Scene, como o id é acertado para a primeira página, vai dar esse case aqui. Vai escolher o case e vai retornar o componente de primeira página. Tá bom? É isso que está acontecendo. Agora, se a gente quiser adicionar a nova página, a gente só pôr aqui outro case. Tá bom? Por exemplo, segunda página. Vamos fazer a segunda página. Case segunda página, vamos retornar segunda página, componente. Mas ainda não definimos esse componente, né? Vamos botar um break, vamos esquecer. Tá aí. Para reclamar agora. Ah, não reclamou ainda porque não chegou a essa parte. Mas se a gente botar aqui, por exemplo, segunda página, vai chegar esse ponto aqui e vai reclamar. Ei, não sei, não conheço segunda página. Então vamos lá. Vamos criar a segunda página. Vamos só copiar a primeira. Vou copiar esse arquivo aqui. Na verdade, vou só duplicar aqui. Templeite, segunda... Tá dentro do componente, componente, direitório. E chamo ele de segunda página, um arquivo. E vamos mudar aqui, não se esqueça. Eu copiei tudo, mas vou botar segunda página, componente funcional com a segunda página, define uma função e retorna o template. Esta é a segunda página, por exemplo. Eu vou botar o justify no content e vou botar um background aqui. Quero antique white, só para diferenciar. Eu acho que vou ter o estilo tudo aqui como objeto, em vez de tirar isso daqui e pôr lá no... dentro de uma variável, como eu fiz no index aqui. Você pode fazer isso também, mas agora eu não me importo com a organização, só quero demonstrar como se use navegador, certo? Então vamos deixar lá. Vou ter a exporta, o componente. Não se esqueça, o nome mudou, segunda página, né? Tá tudo certo, importamos react e os componentes do react native. Fizemos o destructuring. Se você nos destructuring, é esses negócios aqui que a gente fez. A gente chama destructuring. Para tirar, extrair esses componentes específicos estão dentro do modelo react native. Agora exportamos ele e tá tudo ok agora. Agora vamos voltar para o index e o que a gente vai fazer é primeiro a gente ter que importar ele aqui, vamos importar aqui, porque a gente... Ele não sabe o que é a segunda página ainda. From.barr, porque referente ao diretório presente aqui, segunda página, sem a extensão. Tá bom? Então vamos ver o que acontece aqui. Essa é a segunda página com o background, cor de fundo, antique white. Tá bom? Então uma rota inicial agora é a segunda página, ele mudou, né? O roteador, o navigator, seguiu essa rota aqui, porque dentro do ID tem segunda página, para o inicial. Ah, e o que acontece se for um errado? Não tiver, não tem. Não vai dar nenhum case, né? Não acontece. Passa por todos os casos, mais nenhum. É seguido, então não mostra nada. Tudo em branco. Tá bom? Para demonstrar a gente pode botar um estilo para o navegador, vou botar um estilo para o navegador, passo um objeto, ground color, botar blue aí, acontece. Entendeu? Aí o navegador está com o fundo azul, mas não tem nenhuma rota para pôr no topo, né? Dessa, desse fundo. Então botar a primeira página de novo. Tá bom? Então você vê que a primeira página está no topo do navegador, que tem um fundo azul, né? Vou botar a segunda página. Você vê que agora a segunda página eu defini um code background, né? Para ser anticoite. Por isso que aparece anticoite em vez do azul. Tá bom? Vamos voltar isso para a primeira página. Vamos revolver o background, que eu não quero. Vou demonstrar o navegador. Essa é a primeira página. Tá bom? Mas você notou que antes a gente tinha três botões, né? Como é que a gente faz para fazer a primeira initial route, a rota inicial para ser aquela página com os três botões?