Resumo do Tutorial de Navegação com React Native Router Flux

Agora a gente vai ver quando conectar essas duas cenas, lixo de posts com ver posts, os detalhes desse post. Em vídeos anteriores eu demonstrei como usar o componente chamado navigator para fazer navegação usando no react native, mas... Esse caso eu não vou usar o navigator, eu vou usar o módulo chamado react native router flux. E a gente vai usar esse cara aqui, react native router flux. Vou usar para que fica bem mais fácil fazer navegação e também muito intuitivo. Tudo que a gente precisa fazer é definir um roteador e definir cada cena. Nesse caso a gente só tem duas cenas, essa cena, lixo de posts e essa outra cena ver posts. Então é como se fosse muito parecido com o react router para o react para o web. Quase a mesma coisa, mas eu vejo falar route, fala scene e toda cena vai ter uma aqui para identificar a rota. Para a gente quando poder chamar a função para mudar de rota, a gente só precisa chamar a função com o nome dado pela key. Nesse caso vai ser login component para essa scene, vai ser esse cara e dar um título. Esse título aqui vai aparecer na barra do topo. Quando você for navegador tem a hora, tem o carrier e vai ter uma barra aqui com o título dado pela sua propriedade. E nesse caso nosso wireframe vai ser essa lista de posts e vai ser esse ver posts. E esse botão de volta vai ser fornecido pelo react native router flux por padrão. Então fica muito mais fácil, nem precisa fazer nada que já vai aparecer o botão de voltar. Se essas duas cenas forem parte do mesmo nível e começar na lista de posts e adicionar a nova cena ver posts e dá para voltar. Então vamos lá, vamos navegador. Vou instalar npm, install, dash dash save, react, native, router flux, flux. Vai dar o react native router flux, vamos verificar o meu package JSON. Aqui vai adicionar o react native router flux para mim as dependencies. Norte que eu estou usando versão 3.37 e para versões for maiores quando dá o npm install sempre está a última versão. Então to me cuidado com isso porque pode ter uma nova versão lançada e as coisas podem mudar. E essa versão que estou usando agora pode não mais funcionar, pode dar alguma coisa para mudar. Então fique ligado, estou usando 3.37. Quando voltando aqui eu já te instalei, vou criar um arquivo dentro da minha parte src chamado router.js. Nesse arquivo a gente vai definir as nossas rotas. Primeiro vou fazer um componente chamado router component, vou importar o react, vou fazer um componente funcional, react from react, nome do componente vai ser router component, por favor adicione component, porque só router vai confundir com o componente router que é parte do module do react native router flux. Então adicione essa palavra component, faz uma função aqui, define a função e exporta esse componente. Dentro da função retorne template, criamos um componente chamado router e a gente só vai fazer o router e define as cenas, scene, dentro do router. Esse router aqui é o router do importado do react native router flux, tá bom? Então vai precisar desse router e também vai precisar do scene. Toda a cena tem aqui, esse aqui é o nome da função que será chamada para mudar de cena, mudar para essa cena. Nesse caso a gente tem duas cenas, tem a lista de posts, tem a ver posts, vou chamar essa lista somente list. Vamos definir esse cara aqui, chamar de list, qual é o componente, vai ser o list, a gente vai importar depois e qual é o título. Nesse caso eu vou usar o título lista de posts como está aqui no wireframe. Ok, e termina o componente. Note que eu preciso importar a lista, na verdade eu já fiz isso no app, vou voltar para o app.js e eu já tenho aqui na verdade, esse import que a gente fez no app, do list e do post de tail, vou é cortar, não precisamos mais. E vou colar dentro do router aqui, tá bom? Então você importe todos os componentes, porque precisar aqui, nesse caso já tem um list. E vamos fazer outra cena agora para o post de tails, fazer outra cena. Adiciona aqui, vou chamar post de tail, esse vai ser o nome da função que a gente vai chamar para mudar para essa rota. Componente, vai ser o post de tail, esse cara aqui, que a gente já importou. E o título vai ser ver post, do jeito que está no wireframe do nosso rascunho aqui, ver post, esse cara aqui. Então, só isso que preciso fazer aqui. E note que o primeiro cena definido vai ser a inicial, se você quiser definir explicitamente, podem botar in a shell. E nem que você mude de posição, vai ser sempre esse cara inicial. Se não tiver essa palavra, esse cara iria ser o inicial. Pode testar aí. Vou continuar, tá bom? Vou botar isso para lá, voltar, tudo ok. Agora volto para o app e vou importar esse componente aqui. Em vez de falar essa view e essas todas as coisas, eu vou botar o router. Mas o que é router? Temos que importar, vamos voar aqui. Vou aqui, import router, tá no mesmo direitório, app e router. Então vou escrever router. Tá bom, agora vamos ver o que é que deu. Estualizando. Parece o list de posts. Note que tem essa barra aqui com o título que foi dado a cena, nesse caso, list de posts. Mas eu acho que tem uma coisa atrás disso. Se você dá um rolagem aqui, note que está escondendo. O conteúdo está escondendo atrás da lista de posts, da barra aqui, né? Para resolver isso, eu vou para o router, vou definir uma propriedade, adicionar a propriedade para o router chamado scene style e passo o objeto com estilo. E esse estilo é só botar um padding top 65. Por que eu usei padding? Se eu botar margem, essa barra vai para baixo, eu não quero a barra que vai para baixo. Eu quero o conteúdo que está dentro, que vai para baixo. Eu quero botar um padding da maneira que ocupa um espaço em branco e depois o conteúdo. Então esse cara vai aparecer mais ou menos aqui, quando eu adicionar aquele padding, em vez de ficar atrás do list de posts. Vai ficar assim. Então vou salvar. Note que no app eu só botei o router que remove aquela vio que a gente tinha, tá bom? Então dá uma atualizada. Agora não tem nada mais atrás. Santo, o que, não sei o que, não tem nada a se esconder, tá bom? Verificar o Android. Vou dar rr para atualizar a KD. rr. Sonando. Vamos atualizar. KD, rr. rr. Tá, também tudo ok aqui, nada ficou atrás. Agora a gente precisa, quando clicar, ir para outra cena. Vamos ver como fazer isso. Vamos lá para o last item. Esse cara aqui. Então você note que o on press do touchable opacity não tem nada. Faz de conta que tem uma função agora chamada on item press, tá bom? A gente vai chamar essa função e é dada como propriedade, on item press. Mas quem vai passar essa propriedade, essa função, vai ser o list, né? Cadê o list? P list. Vou para o list, componente. E aqui no list item, quando está criando, vou adicionar on item press, vai ser o que? Vai ser 10.on item press, que eu vou definir em um momento, tá bom? Vamos lá. On item press, define esse cara. E o que eu quero fazer? Quando eu clicar, eu quero mudar de cena. A gente, para mudar de cena, usa o chamado actions. Esse object com o nome daqui, qual é daqui do ver post? Post detail, né? E chama como se fosse uma função, né? É uma função. Vai no rarush só para confirmar. Está aqui. Key post detail, chama como uma função. E é só isso. Vai mudar de cena. Muda de cena para post detail. Agora tem que importar esse cara do react-native-router-flux, né? Vamos aqui. Import actions destruturar dentro do modelo react-native-router-flux. Vamos ver, testar. Avegador. Vou ficar aqui. Você vê. Vou voltar aqui Google Chrome. Clico. Mudou de cena. Tá bom? Tem um botão de voltar já for necido. E tem o ver post novo título. Voltar, vamos ver outro. Key-ast esses. Voltar, não sei o que. Mas fica só carregando. Por quê? Porque a gente não passou a id do post. Se leva a gente tem que injetar como a propriedade o post id. Então, vamos fazer isso. Então, no list item aqui, você note que a gente vai passar o id do post para essa função. Qual id? Está dentro do objeto item, né? Vamos fazer item.id. Salva. Volta para a definição da função que está dentro do list. Vamos adicionar o argumento id. E quando a gente chamar para a nova cena, a gente passa um objeto que é as propriedades, que serão passadas a um novo componente. Nesse caso, quero post id para ser esse id aqui, que foi dado. Vamos salvar. Vamos ver se funciona agora. Clicar, carregando aí. Deu certo. Diferente que é esse. Este é um tempore vitae. Não sei o que. Magna uti herrum yure. Não sei o que. Tá funcionando. O tocou. Ele ficou Android. RR. Carregando, tudo ok. Tudo ok, né? Só para recapitular, a gente define todos os nossos rotos no arquivo chamado router.js. A gente define o que é chamado scenes. Esse aqui é muito parecido com o modo react-router para o react-web. Em vez de ter scenes, a gente fala route, no react-web. Muito parecido. E adicionar o scene style para o conteúdo não aparecer atrás da barra. Do header, né? E define todas as cenas. Cenas tem um aqui, tem um componente, tem um title. E se quiser, inicial, adicione inicio. E para mudar de cena, simplesmente chamem actions.wiki, a chave da cena. Se quiser passar a prop, só passar um bichete. Não se esqueça de importar tudo do react-router flux e destruturar. Então, gente, completou nosso aplicativo. Esse aqui. Tudo ok. Nosso reducers, as ações. Isso fica, tudo legal. A gente só dá um recapitular no redux. Então vai ter o aplicativo, normalmente, dentro desse componente, você chama o action creator. O action creator, que é injetado usando o map dispatch to props. E esse action creator é uma função que simplesmente retorna uma ação. E essa action é despachada para todos os reducers. Aí os reducers que se importarem pela ação vão mudar o estado, vão retornar o novo estado. E esse novo estado é conectado ao aplicativo através do map state to props. Então, a gente sempre vai ter disponível, via os props, o estado e o action creator, as funções. Sempre assim, sempre nesse cico. Tá bom? Espero que tenham gostado dessa série de vídeos. Introdução ao redux. Se tiver alguma pergunta, por favor, deixe nos comentários. Algumas sugestões. E espero ver vocês nos vídeos que irem fazer no futuro. A gente vai aprimorar os conhecimentos aqui. A gente só fez um aplicativo usando o R do CRUD, só dá para ler. No futuro, a gente vai aprender a escrever, dar um update, atualizar. E também, a dela estará os records, os posts. Então, a gente no futuro vai fazer um aplicativo CRUD completo. Só para... Só para me lembrar, por favor, me siga nas redes sociais, estou no Twitter e estou no GitHub. Meu username é nbkhope, tá bom? Aqui meu logo, nbkhope.com.br. Muito obrigado para assistir. NBK, tudo. Até logo. Tchau.