Aprenda a usar o componente do React Native chamado Navigator, que nos permite implementar a navegação no aplicativo. ⚠ Note que esse componente se tornou obsoleto na versão 0.43 e foi totalmente removido na versão 0.44. ⚠

Introdução ao Componente Navigator (⚠OBSOLETO)

Aprenda a usar o componente do React Native chamado Navigator, que nos permite implementar a navegação no aplicativo. ⚠ Note que esse componente se tornou ob...

0002 Introdução ao Componente Navigator (⚠OBSOLETO)

Introdução ao componente Navigator [⚠OBSOLETO]

Se você já vem seguindo a minha série de vídeos sobre introdução ao React Native,
você percebeu que até agora a gente só fez as coisas em componentes só, que é o
componente do aplicativo.
A gente ainda não lhe deu com navegação, com a criação de outras cenas para o aplicativo
móvel. Até agora a gente fica só na mesma página. Neste vídeo a gente vai falar de um
componente chamado Navigator, que é um dos componentes que permite você fazer
navegação no aplicativo móvel usando React Native. O Navigator funciona tanto para Android
como para o iOS. Neste vídeo a gente vai falar como é que configura o Navigator e a gente vai
fazer um aplicativo bem simples. Vamos botar uns três botões aqui nessa cena principal.
Em cada botão a gente vai, quando clicar, vai mandar o aplicativo para outra cena,
para outra página. O navegação do aplicativo móvel usando o Navigator é feita com um stack.
Português pília, a gente vai puxar para empilhar uma cena para stack e quando a gente quiser
voltar para a cena anterior a gente vai fazer um pop de empilhar. Se você entende sobre a
estrutura de dado pília, então você vai entender como se funciona fundamentalmente,
mas não precisa desse detalhe para fazer a navegação. Então vamos lá, eu criei um novo
project, chamei ele de navegador, então eu criei o project chamado meu navegador fazendo
comando o React Native e Net meu navegador. Esse é o nome do meu aplicativo, você pode
dar qualquer nome que quiser. Quando faz isso vai demorar um pouco e o já fiz aqui, vai criar essa
gera essa aplicação aqui de demo que a gente pode usar como ponto de partida para o nosso aplicativo.
Então depois que fizer isso, dá um CD para entrar no diretório da React Native Run iOS para rodar
o aplicativo, vai abrir o simulador do Xcode e também o React Packager numa tela do terminal.
As vezes se você tiver problema com runtime development server não tá rodando, dá um
NPM start e depois roda React Native Run iOS. Vamos lá então, eu tenho aqui meu aplicativo,
vou abrir o Atom, ver o Atom aqui, esperar, Atom abrir, vamos remover tudo isso e vamos botar uns 3
touchable highlight, botões sensíveis ao talk, tá bom, isso que a gente vai fazer primeiro e depois a
gente vai lidar com o navigator e ver como a gente configura ele e fazer os outros cenas que na
verdade serão outros componentes diferentes que a gente vai criar. Normalmente o React a gente faz
vários componentes, a gente pega a interface e quebra e divide em vários componentes menores,
mas até agora a gente não fez muito disso porque a gente só veio aprender a usar os componentes
que são dados pelo React Native, mas numa aplicação mais complexa você tem que dividir tudo em
componentes mais básicos, menores, que vai fazer você re-usar o seu código e também fazer as
coisas muito mais convenientes pra programar. Então vamos aqui no, eu vou pro index.ios,
vamos a essa aplicação demo daqui, não, dá pra ver, tirar todas as coisas, não quero,
vou tirar essas coisas aqui, esses estilos, então vamos botar uns 3 touchable highlight aqui,
então como é que se faz? Primeiro importa, touchable highlight, highlight,
vamos aqui botar ele, touchable highlight, auto completor,
fecha tag, agora vamos dar um texto, então vamos botar uns botões pra ir a página 1,
página 2, página 3, pode chamar o que quiser, vou chamar, vou botar a imagem de,
vou chamar, sei lá, primeiro, primeira página, primeiro página, salvar aqui,
deixa o botão Live Reload Enable, vamos salvar, vai automaticamente atualizar isso,
isso aqui é a primeira página, botão né, na verdade é um botão, então vamos botar um estilo
pro botão, style, vou fazer o estilo aqui, rapidinho, botão, vamos botar um border with,
botão, ils Even, vou botar um border circular, надо o nada, uns 4,
botão padding, vou ver como que fica,
Vamos montar o bom, hein?
Vamos botar um background, code fundo.
Background color, sei lá.
Muita...
Orde P.
Botar vermelho.
Tá certo que vai ser vermelho, que é verde,
que é azul, então tudo vermelho.
Orde B, RGV.
Mas eu não quero tanto vermelho, botão 128.
Mais 96, 1B.
Tá bom assim. Vamos mudar o texto também.
Botão estilo.
Sei lá, botão...
Texto do botão.
Botão...
Botão sei lá, botão branco.
RGV branco é todos os cores, né?
Aí.
Vamos botar...
Diminuir um pouco.
Só pra ver.
Péss.
Ah, ficou ruim.
Fiquei lá, hein?
Não perdi tempo com isso não, né?
Botação negrito.
On weightboard, negrito.
Tá aí.
Tá bom assim, né?
E vamos tirar esses.
Desculpa.
Perdi tempo com o estilo não, hein?
Então vamos voltar.
Já fizemos estilo pro botão, estilo pro texto do botão.
Então já tem aqui.
Então agora,
só botar o on press, né?
Botar a propriedade, chamar de on press.
E a gente vai fazer alguma coisa
que eu não vou definir agora.
Deixar assim a função de flash
que não vai fazer nada, do tanulo.
Mais aperta, né?
Clica lá.
Então tem isso.
Vamos fazer e botar uns três aí.
Copiar isso.
Dois, três.
Vamos mudar os outros aqui pra ser
segunda página e terceira.
Vamos botar
uma margem
no bottom
pro botão.
Que eu não quero...
Quero que tenha um espaço aí.
Então aqui o botão.
Margem, bottom.
Tá vinte. Tá bom?
Vai ter espaço de baixo no botão.
Tá aí.
Então a gente fez
a página principal.
Agora é só falta a gente...
Quando clicar
um desses e pro...
pra cena que a gente quiser.
Então vamos fazer
a cena aqui
pra esses
primeiros página, segunda e terceira.
O que a gente vai fazer?
Vamos aqui no meu navegador
e criar uma pasta.
Vou chamar aí de component.
E vou criar
um arquivo chamado
primeira
página.
Tá bom?
Aqui, vamos aprender como
fazer um componente do react.
E até agora a gente
só fez tudo nesse componente principal
que é o ponto de partida
da aplicação aqui, né?


0002-01 Introdução ao componente Navigator [⚠OBSOLETO]

Introdução ao componente Navigator

A aplicação aqui, né?
Meu navegador.
Então, tem dois tipos de component React.
Tem o functional component e tem o class component, essencialmente, né?
Então, class component é o componente que a gente vem usando até agora.
Esse aqui, por exemplo, que é uma classe e extends, deriva do component.
O que... Então, o componente de classe tem um estado, né?
A diferença entre os dois aqui é que o functional component não tem estado.
A gente chama stateless, sem estado.
E o único serviço que o functional...
o componente functional faz é mostrar uma coisa, desenhar uma coisa na tela.
Então, não mantém estado, isso é usado para mostrar um template.
Então, vamos clicar em primeira página.
E esse primeiro página, a gente não quer fazer nada.
Vamos botar só um texto nela.
Então, não precisa de estado, né?
Então, a gente faz um componente como se fosse estático, sem nada.
Só para mostrar uma coisa.
Vamos botar uma const.
Vamos chamar o nome do componente.
Sempre use a primeira letra de cada palavra.
Maiúscula, tá bom?
No nome do componente.
Não se esqueça, a primeira também tem que ser maiúscula.
Primeira letra da primeira palavra.
Vamos definir.
Vamos usar a função de flash aqui, tá bom?
Se você não está confuso,
isso aqui, isso aqui é usando as coisas do JavaScript ES6,
a nova palavra chave const,
que significa que eu só posso definir essa variável uma vez
e não mais depois disso, dessa definição.
E aqui, usando a função de flash,
também uma novidade na nova versão do JavaScript ES6,
que é, na verdade, quase a mesma coisa de falar isso assim, tá bom?
Então, se eu for usar o ES5, ES5, que é a versão como se fosse antiga,
ia ser assim.
Tá bom?
Mas a gente vai usar o ES6.
Tá bom?
O que a gente tem que fazer nesta função?
Só retornar o template.
Então, vamos botar um text.
Tá bom?
E vamos fazer...
E, a primeira...
Só um texto aí.
Aí, quando você, no final, tem que exportar,
exportar default, primeira página.
Pra essa maneira, a gente pode importar esse componente do nosso index.
Tá bom?
Só um detalhe aqui.
Eu acho que esse texto não vai ser conhecido,
mas vamos tentar, só pra ver o erro.
Então, vamos voltar no index.
Vamos por solid test, um import here,
primeira página from, onde é que está a primeira página.
Se lembra que a gente criou uma pasta que é chamada components.
Então, vai estar lá, né?
Vamos voltar.
Se é no referente ao diretório o presente,
você tem que botar um ponto e uma barra, tá bom?
Então, vou botar ponto, barra, components, primeira página.
Não precisa da extensão ponto Js.
Aí, bota o ponto e o vírgula, tá bom?
Não se esqueça do ponto, barra, porque é o diretório presente,
referente a esse diretório presente,
e não precisa da extensão.
Então, vamos...
A gente importou, vamos usar.
Vamos só recortar tudo isso aqui,
e eu vou botar o componente aqui.
Qual é o nome do componente? Primeira página, tá bom?
E vamos ver o que acontece.
Can't find variable react.
Então, o que é que aconteceu?
Então, toda vez que a gente cria um componente de novo,
a gente tem que primeiro fazer os imports, né?
E eu esqueci de fazer aqui, né?
Primeiro de tudo, tem que ter o react.
Aí, depois, se você está usando alguma coisa do react nere,
você importa dele, por exemplo, o texto.
Mas vamos só fazer o react primeiro.
Vamos lá no componente.
Vamos import react from react.
O módulo é chamado react,
e a gente dá o nome da variável, chama react.
Tá bom?
Agora, falou que não achou o texto, né?
O texto vem do react native.
Então, vamos dar o import, text, tá bom?
Teu destructuring from react native.
Vamos ver o que acontece.
Tá aí, né?
Essa é a primeira página.
Você notou que eu preciso usar isso?
Que é o destructuring, se eu não for, o que acontece?
Invalido, né?
Porque esse módulo aqui é chamado módulo do react native.
Então, se eu não tiver esse negócio aqui,
isso vai ter que ser react native, assim.
Aí, quando falar de texto, eu falo react native.txt.
Então, dentro do objeto react native,
tem um componente chamado texto.
Então, a gente não quer digitar todo o tempo assim.
Ah, estou me referindo ao texto que está dentro do react native,
do módulo do react native.
Então, a gente usa o destructuring.
Em vez, a gente quer extrair essa parte aqui.
A maneira que a gente faz é assim.
Põe a chave, o braces aí e fala o nome da coisa que está dentro do módulo,
que a gente quer extrair.
Nesse caso, o texto.
Então, eu estou extraindo esse texto dentro desse módulo chamado react native.
Desta maneira, eu não tenho que falar todo o tempo do react native,
que já foi extraído.
Então, vamos voltar, está tudo funcionando agora.
E aqui, a gente fez um function component.
Note que a gente não tem uma classe aqui,
como a gente tinha nesse primeiro aqui.
Tá bom?
Porque a gente não precisa manter esse dado nesse componente da página.
Tá bom?


0002-02 Introdução ao componente Navigator

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?


0002-03 Introdução ao componente Navigator

Então, agora a gente vai definir como a página principal,
aquela página que eu extrai no botão que a gente fez,
com Startable Highlights, tá bom?
Então, vamos criar uma nova rota, chamar ela...
Vamos botar no default,
quando todos esses caras aqui não funcionarem,
vamos pôr o...
Pagina com os botões, vamos chamar alguma coisa, sei lá, menu...
Menu, opções, alguma coisa.
Vamos chamar menu...
Sema nav menu.
Tá bom, vamos criar esse componente com a template, esse aqui.
Então, vamos criar um novo componente aqui,
new file, novo arquivo,
vamos chamar de nav menu, tá bom?
E vamos lá, criar de novo um componente.
Bom, ok, a primeira vai perguntar,
esse componente vai ser funcional ou classe?
A gente precisa manter a estada?
Bem, o que a gente tem no template?
Tem três botões sensível, talk.
Até agora, parece que não estamos mantendo nenhum estado.
Então, vamos criar um funcional.
A partir de um momento que a gente começa a adicionar outras coisas,
e a gente ter que começar a manter o estado,
naquele momento a gente pode mudar de funcional para componentes de classe.
Mas, agora, no momento, a gente não precisa manter estada,
então, vamos fazer primeiro o funcional.
Ok, estamos aqui dentro do...
arquivo nav menu, né?
Primeira coisa, vamos importar o react.
From react.
A gente vai precisar do react nere, dos componentes, né?
View, touchable highlight, utext.
Então, vamos lá, import.
Vamos dar um destructuring,
porque a gente não quer digitar react.nere.txt, react.nere.view.
Vamos botar lá, text.view, touchable highlight.
Vamos botar numa nova linha,
só para ficar mais organizado from react.nere.
Bom, importamos os componentes essenciais para rodar react.nere.
E vamos fazer o...
Vamos fazer o componente, tá bom?
Se a gente ver aqui como é que a gente fez antes, eu fiz um cost,
primeiro página, e pui a função.
Aí, depois que eu exportei, tá bom?
Mas esses dois passos podem ser feitos só um.
Então, eu vou fazer...
Export default, ao mesmo tempo.
Tá bom?
Export default e vai ser...
Função, tá bom?
E retorno o template, que já tá aqui, que eu copiar aqui.
Aqui, você...
Aí o template, já exportei...
Automaticamente...
Ah, esqueci o nome, né?
Vamos ver.
Então, vamos voltar aqui no index e por...
Importar nav menu from component...
Nav menu sem extensão.
Agora, vamos mudar a rota inicial no navegador para ser nav menu.
A gente não tem aqui, mas vai para o default, né?
Porque todos esses caras não vai reconhecer.
Can't find variable styles.
A gente não tem estilo para o nav menu, né?
Quer que é styles?
Então, a gente pode copiar aqui.
Na verdade, os styles já estão aqui, em vez de estar no outro arquivo.
Então, vamos copiar os styles aqui.
Copiei do outro.
Tá bom? Vai ter o container, botão e texto do botão.
Nesse caso, a gente precisa de um stylesheet create.
Tá bom?
Então, vamos por esse componente stylesheet aqui, do react-native.
Tá bom? Tá aí.
Vamos remover esses styles aqui, que não precisamos, né?
Pode precisar depois, mas sei lá, vou tirar...
Tirar.
Vou ensucar um momento para comentar isso.
Tá bom? Agora, foi o nav menu aqui.
Componente exporteia logo, que fiz a função,
em vez de primeiro fazer a função,
associar com a variável const,
e depois exportar, fiz tudo ao mesmo tempo aqui.
E retornei o template.
Esse template tem uns styles aqui, que eu copiei do outro,
que na verdade a gente estava usando naquelas estilos.
Fiz um const, fiz um stylesheet, fola de estilo.
E...
Estamos todos definidos aqui, não precisamos mais definir no outro index.
Aí aqui, no initial route do navigator,
é vai ser nav menu.
E no default nav menu aqui,
porque esse...
não segue, não segue esse, vai no default.
E a gente exportou aqui.
Então tá aí a página inicial, é a página dos três botões.
E quando a gente clicar, a gente quer mudar para a cena da primeira página,
para aquele componente.
Se lembra que eu falei do propsnavgearopush,
a gente vai usar isso agora.
Vamos voltar aqui,
para nav menu, e vamos definir as funções
quando você clicar o botão, o que é que vai acontecer.
Primeiros vamos clicar a primeira página,
que é esse touchable highlight.
Vamos fazer aqui a função aqui, não é?
Vamos criar essa função chamada navigate.
Só para facilitar o nosso trabalho aqui.
Vamos fazer uma função,
vou chamar navigate, tá bom?
E const.
Vou tentar de bobo aqui fora.
Vamos ver se vai funcionar aqui fora.
Chama navigate.
Vamos pegar o ID da rota para ir.
E vamos fazer propsnavgearopush,
passa um objeto, um id,
como id.
Mas agora não vai saber o que é props, né?
Vamos ver aqui no navegador debug,
vou inspecitar, botar o console.
E push navigate.
E agora quando a gente clicar,
a gente chama o navigate com o id,
sei lá, primeira página.
Vamos ver o que acontece.
Undefined is not an object.
Tá dizendo que não está definido
se navigador dos desplos props.
Mas o que é props?
Não é?
Não sabe o que é.
Então vamos primeiro aqui falar do componente.
Depois a gente vê a função aqui.
Então todo componente é injetado props,
propriedades.
Você vê aqui que a gente põe propriedades
por navegador initial route,
tem um render scene.
São todas propriedades injetadas
nesse componente chamado navigator.
Do jeito e dentro do componente,
a gente tem acesso aos propriedades
via this.props.
Mas aqui a gente não tem ainda,
porque quando a gente inputar ali
no argumento dessa função de costa,
que é o componente funcional,
a gente põe props e esses props
vai ter todas as propriedades
que foram dadas a esse componente.
Nesse caso aqui,
eu não passei nenhuma propriedade
para o navegador.
Mas eu quero passar ao navegador,
porque o navegador tem que ter acesso
ao navegador para usá-lo,
para se comunicar com o navegador
para dizer eu tenho que mudar a página,
você tem que mudar a página.
Então a gente fala o navegueiro que
essa é a propriedade que a gente está passando
para o nav menu e o valor
vai ser esse cara aqui,
o argumento da função render scene,
que é o navegador, o próprio navegador.
Tá bom?


0002-04 Introdução ao componente Navigator

Então vamos voltar para o nav menu, o componente nav menu e já que ele recebe navigator como
a prop, vamos ver o que está acontecendo agora.
Então eu estou chamando navgate aqui, mas é navgate quando eu clico, você vai ver,
você vê, cannot read property navigator undefined.
Você não sabe que é prop, você não sabe que é o dois, né?
Então normalmente aqui eu estou fazendo um componente funcional, então vamos mover isso
para dentro do componente, que antes tinha uma classe, né?
E a gente definia as funções aqui, mas esse componente é funcional, então a gente
define aqui e vamos usar o const agora, const navigate, tá bom?
Vai ser assim.
Use a função chamada navigate e use a função de flash aqui, tá bom?
Não confura e semicolon, ponto virro agora vai saber o que isso é, né?
Um detalhe nesse problema aqui é que a palavra xavi, o des, não é requerir quando você
for no componente funcional, é uma das diferenças quando você tem o componente
de classe, peço o funcional assim com a função de flash, então você não precisa falar desse
porque o props já é passado como argumento para a função e não precisa falar assim,
só falar assim, tá bom?
Agora vamos ver como é isso, tá?
Um clear, clicou na primeira página, foi para a primeira página, vamos dar um atualizar
para ver de novo, clica, ele vai para lá, tá bom?
Então vamos recapitular aqui.
Então tem um tóctebo highlight que tem um on press, propriedade on press do tóctebo
highlight quando você clica o botão chama essa função, tá bom?
A função aqui que a gente está chamando é navigate, que a gente definiu aqui, esse
é o componente funcional, então a gente tem que definir a função assim, dentro do
componente que é uma função de flash, a gente define a função navigate e eu botei
const e define como uma função de flash, isso que a função faz.
Nesse caso a gente estava tentando se referir ao props, propriedades dadas a esse componente
chamado nav menu que está aqui, propriedade navegueira, mas antes de estar dando erro
porque não sabia o que era.
Então o problema é nos componentes aqui, quando a gente faz componente class, a gente
precisa da palavra chave des para se referir às propriedades, os props, mas no caso que
é componente funcional, não precisa des porque já é passado como o argumento para
essa função.
Então a gente só fala props, aí tem o navigator que é esse cara aqui, né?
E a gente dá um push, o navigator que a gente pula, tá bom?
A gente push, a gente empilha essa nova rota, esse objeto aqui que a gente dá é chamado
o route, a rota.
Na verdade quando a gente fala isso, ele vai para o render scene do navegador, navigator,
e essa variável contém aquele objeto que a gente passou, por isso que tem o id aqui,
aí vai checar o id, nesse caso a gente passou o id que veio daqui, primeira página.
Então ele seguiu essa rota e retornou, primeira página.
Tá bom?
Esse caso aqui eu não preciso nem escrever id assim porque na nova versão ES6, ES6 do
JavaScript, você pode fazer assim, você não precisa nem disso.
Botar em uma linha, bom?
Primeira página.
Agora vamos fazer a mesma coisa com os outros.
Vamos aqui para a segunda página, o botão, eu posso só falar o navigate, né?
Navigate, segunda página.
E para o outro aqui também, navigate terceira página.
E agora vamos desstar funcionando, clica na segunda, aí vamos dar um atualizar para
voltar e terceira.
Ah, o que está acontecendo?
A terceira página não tem, porque o default era o nav menu, então não tem a página
terceira, então está voltando para o mesmo menu, está empilhando a mesma coisa.
Agora vamos pôr um botão de voltar aqui, porque não dá para voltar agora.
Então vamos para a primeira página e vamos deixar a terceira para fazer depois, tá bom?
Vamos para a primeira página aqui, botar um botão para voltar.
Então vamos for aqui, ponho um touchable highlight que no on press, quero que volte.
Voltar, precisa ter esse texto, né?
Se não vai dar eu, tem que estar dentro de um componente de texto.
Vamos ver.
Ah, não é definido, esqueceu de importar o touchable highlight.
Já como está muitos imports, talvez eu vou fazer assim.
É melhor voltar aqui.
Então vamos definir isso, voltar.
Nesse caso eu quero que ele volte, eu quero que desempeite essa cena aqui.
A gente vai usar o pop em vez de push, tá bom?
Vamos ver qual é a diferença.
Nesse caso eu não quero fazer a função navigate, não.
Eu vou só botar o navigate aqui.
Então vamos voltar os props aqui, que a gente está recebendo props, né?
Vamos voltar lá para o navigator, checa se está passando o navigator também.
Não está, né?
Então vamos adicionar o navegador, a propriedades, para ele poder voltar.
Segunda página também, já que estamos aqui.
Agora vamos aqui.
Conheço o terceiro, a gente estava na primeira página.
A gente tem acesso às propriedades, são dados da primeira página.
E vamos chamar a função aqui.
Vamos falar props.navigator e qual é a função pop, tá bom?
Vamos só desempeilhar.
Primeira página, clica em voltar, desempeilhou, voltou para a anterior, tá bom?
Essa é a diferença.
Quando você pop, ele volta para a cena anterior.
Quando você dá um push, ele sempre adiciona uma nova cena no topo da pilha, tá bom?
Se eu botasse um push aqui, sem nenhum objeto, o que aquilo ia acontecer?
Você vê que empilhou uma nova menu, né?
Uma nova cena para o menu, mas não voltou para o menu assim como se fosse desempeilhado.
Você vê a transição, o efeito de transição é diferente.
Se eu voltar pop, quando eu clico no push, a transição é assim.
Mas quando eu volto, a transição vai para lá, né?
Eu clico, o conteúdo vem para mim, vem da direita.
Quando eu clico no key, voltar aqui vai dar um pop, vai para a direita e é desempeilhado.
Volta para onde está?
Volta para a cena anterior, mas quando eu dar um push, eu botei nenhum, nada no objeto,
então vai acessar a rota do nav menu, que é o default.
Então, quando eu clico voltar, dê um outro push.
Você nota que a cena veio da direita, em vez de dar um pop.
Já que a gente tem esse botão de voltar, vamos adicionar ele aos outros.
Eu só vou copiar esse cara e também vou...
Talvez adicionar um estilo ou não. Vou deixar o estilo para vocês.
Só copiar para o outro.
Copiei e vai ser esquecido o texto.
Volto aqui.
Copia.
Aí.
Primeira página, voltar, segunda página.
Ah, não está definido. Vamos aqui e definir.
Está aí.
Ter uma página, voltar.
Props not to find. Esqueci de botar props.
Segunda página, props.
Aí. E a mesma coisa que aconteceu na página.
Você nota que a gente está copiando os códigos aqui,
quando você nota que você está copiando e colando muitas coisas,
você nota que você vai criar um novo componente
para ter esse re-usar o código.
Por exemplo, esses botões aqui,
talvez faça um componente chamado botão.
E esse componente vai ter o seu próprio estilo, que é esse vermelho.
E quando você quiser usar o botão, é só chamar o seu componente, por exemplo,
botão e passa, sei lá, a placeholder
para ser o negócio que está dentro do botão.
Está bom?
Aí, eu também fazia,
adicionava, adicionaria um on function,
like on press, que seria esse aqui.
Eu daria essa função aqui
para chamar o on press para o botão.
Volta, por exemplo.
Aí, eu não teria que definir estilo aqui nessa primeira página,
mas o estilo seria definido dentro desse componente de botão.
Bom.
E vamos fazer isso rapidinho, só para demonstrar.
Vamos aqui, componentes, new file, botão.
Botão não precisa de estado, precisa.
Então, vamos chamar aqui, vamos chamar.
Vai ser componente funcional, né?
Então, vamos fazer o import do react, import,
a gente vai precisar de quê?
Do botão.
So, ativou highlight, com certeza, e o text.
React Native,
vou aumentar aqui até lá.
Tá bom?
Então, vamos fazer um const.
Vamos falar botão, sei lá.
Vou dar a função de arrow e botar o props aqui.
E export no final.
Já tá.
Passa o return, vai ser o template.
Já tá aí, que é o...
Como é que é o botão?
Vamos copiar os outros.
Primeira página.
Esse cara.
Eu só copiar.
Ah, não é esse.
É no nav menu, né?
Vamos copiar esses caros aqui, que a gente tá fazendo a mesma coisa,
então, vamos fazer o nosso próprio botão.
Vai retornar isso, estalos, botão.
E a gente não tem ainda, mas vamos fazer aqui,
aqui no nav menu.
Vamos copiar estalos aqui.
Tá bom?


0002-05 Introdução ao componente Navigator

ainda mas vamos fazer aqui no nav menu vamos copiar os status aqui, tá bom?
Põe aqui os tilos, não preciso do container, só do botão e text do botão né?
Já que tem assim já define já o botão, tá aqui e o texto do botão, tá bom?
E no onpress aqui vamos botar o texto, se eu fazer isso aqui melhor, então a gente
põe um retorno tothlatchable highlight que tem um estilo já definido aqui dentro
desse componente e tem o texto aqui, mas o texto a gente quer que o texto seja dado
pelo usuário seja dado externamente, então a gente vai botar props, vai dar como
props, em vez de ter o texto primeira página a gente vai dar pelo props, props.
Sei lá, pode ser placeholder, pode ser label, vamos falar label, o texto sei lá,
o texto do botão, pode ser qualquer coisa mas eu vou escolher label, então quando
também aqui no onpress eu não quero ir para a primeira página, eu quero que ele
que chama a função que é dada pelo props, então posso fazer isso, props onpress.
Bom, agora vamos voltar aqui a primeira página e o botão, eu falei placeholder mas eu quero
que chama de voltar e no onpress eu quero fazer o pop, mas o botão não está definido
ainda, então vamos adicionar no import, import, onde é que está o botão?
Está dentro do component, está dentro e é o botão, então é import.button.from.barra.components.button
E aí, e agora vamos... o que aconteceu?
Ah, a nepotvind.components.button, botão.js, style export default.button, esqueci de nada não,
style sheet, eu esqueci de definir e vou em style sheet ali, o bem que está acontecendo.
Unable to resolve module, import, botão.from.components.button, não problema.
Ok, então vamos voltar de volta, botão.from.barra.components, ah, esqueci, já estamos dentro do botão,
do mesmo diretório, então não precisa disso, components, está aí.
Eu apertei o negócio, aqui então, importei o botão, clica na primeira página, voltar está aqui,
mas o outro não está aparecendo, cadê o botão? Não salvei. Salvado, clica na primeira página, está aí o voltar.
Ah, bom. A razão de largura que está ocupando toda a linha é porque esse container que está no flex1 aqui
e está ocupando toda a linha, e esse aqui, se você ver o inspector, esses caras estão dentro,
não são stretch, não estão sendo elástico. Vê aqui, está justify content center, line item center.
E esse cara, vamos tirar.
Bom, agora vamos tirar esse aqui, que a gente já fez o botão, de volta, vou botar isso no nova linha, compress.
E agora vamos voltar para o nav menu para dar um refactor nesses botões aqui.
Então, esse cara aqui, a gente fez o botão, não é? E não precisa mais...
O botão tem um label que a gente chamou, a gente botou a primeira página e tem um onpress,
não precisa mais de estilo, que o estilo já é definido dentro do botão e está o onpress, está aí.
E que é a função. Então esse cara é assim, salvar e ver se mudou, está tudo ok ainda.
Botão is not defined, esquecemos de importar. Import.
Botão from, botão.
Vamos alisar. Está aí, funciona, né? Agora vamos botar os outros botões, botão, label.
Esse cara onpress, já estava ali de ver só copiar.
Está aí, deletes, faz outro botão, eu vou só copiar, tá bem?
Terceira página, né? Vou fazer isso aqui. Terceira.
Está aí, muito melhor. Temos nosso próprio componente chamado botão e vamos ver.
Eu vou ter o label errado. Segunda página, terceira página.
E agora vamos testar muito bem, segunda muito bem. Vamos mudar esse botão do segundo aí,
em vez de ser tutable, a gente faz o nosso próprio botão, label, voltar.
Você vê que a gente está fazendo o botão de voltar sempre a mesma coisa,
talvez você pode até fazer um componente chamado botão voltar para não ter que fazer sempre a mesma coisa.
Então vamos botar o onpress aqui e está aí, volta, está feito.
E isso tem que estar aqui.
Está. Primeira página, volta, segunda página. Oh, sempre esquecemos.
O que a gente tem que fazer? Isso, importar o botão aqui.
Import, botão, vamos, botão.
Segunda, está aí, o botão volta, está definido.
Então a gente fez o nosso próprio botão, componente, botão, que já tem os estilos aqui dentro desse cara.
A gente não tem que definir estilo para cada visão ou cena que a gente tem.
Já é tudo definido dentro do próprio componente e a gente pode re-usar, usar novamente.
Vamos até remover esses estilos aqui que não precisa mais.
O botão já está definido no componente de botão.
A gente faz todos esses caras aqui e a gente pega as propriedades do props e injeta assim.
E também o label.
Mostra qualquer coisa que é passada com a propriedade que se chama label.
E o navegador está funcionando.
Dá o navigate aqui que só puxa para o navegador, que é passado como props aqui que vem do index da render scene.
Vamos até remover e tirar esse cara daqui que faz o nosso próprio render scene,
fazer a nossa própria render scene, render scene.
Vamos fazer o nosso render scene para ficar...
E eu botar o argumento aqui.
E esse cara aqui, o switch vai dentro, vai ficar lá.
Tá bom?
Aqui é o render scene que eu defini.
Vamos ver se ainda está funcionando.
Tá aí.
Só para ficar mais organizado, eu tirei o render scene e pus aqui fora.
Tá bom?
E o navegador é sempre passado para os componentes aqui dentro da render scene.
E o que é a rota?
É o que você passa dentro do objeto.
E tem o ID que a gente passa aqui e também das primeiras páginas quando a gente quer voltar.
E...
É por isso...
Por isso...
É isso que eu queria fazer nesses vídeos sobre o navegador.
E agora a gente já sabe como empilhar a nova cena usando des props, navegador, push.
E como voltar para a cena anterior usando o pop.
Props, navegador, pop.
Tá bom?
Se você gostou do vídeo, por favor, deixe comentários, se tem sugestões, subscreva.
Cara, é muito gratinho. Muito obrigado.
