Resumo do Transcript

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?