Primeiras aulas do curso React Native: criando menu e navegando entre telas

React Native: criando menu e navegando entre telas

Apresentando a navegação - Apresentação

Olá, seja bem-vindo e seja bem-vinda a mais um curso de React Native aqui na Alura. Eu sou a Natália Thiel e esse é o curso de navegação entre telas.

Nesse curso aprenderemos a fazer aplicações que permitam o usuário acessar diversas telas. A navegação entre telas nada mais é do que trocar de tela.

Agora não vamos mais ter uma aplicação de uma tela só, poderemos criar várias telas, navegar entre elas, passar parâmetros, entre outras coisas.

Nesse curso, vamos utilizar a biblioteca React Navigation na versão seis, que é uma biblioteca que vai nos ajudar a fazer essa parte de navegação.

E utilizaremos o projeto React Native puro, não utilizaremos o Expo. Mas esses aprendizados que teremos durante o curso vocês podem aplicar em projetos Expo também.

A diferença vai ser que, no Expo, algumas etapas da instalação serão mais simplificadas. Vocês conseguem aplicar todos os conceitos de navegação também.

Utilizaremos uma aplicação previamente desenvolvida para facilitar o aprendizado apenas do que importa, da navegação em si.

Essa aplicação terá algumas telas já desenvolvidas, como a tela home, que vai listar os produtores, também teremos a tela de melhores produtores, que vai listar só os produtores que têm quatro estrelas ou mais.

E teremos essa tela de produtor, que receberemos os estilos dela, mas pegaremos os parâmetros vindos da home para aplicá-los dentro da nossa tela. Faremos essa tela.

E também temos a tela de Cesta, que é a tela do produto final da nossa aplicação, onde podemos apertar no botão de comprar e fazer uma simulação de compra, voltando para a tela inicial e mostrando uma mensagem.

Aprenderemos a fazer tudo isso. Ficou interessado? Ficou interessada? Querem aprender mais como fazer aplicações com várias telas? Vamos lá.

Apresentando a navegação - Onde baixar

Agora que vocês já configuraram o ambiente nativo de React Native, seja rodando ele no simulador ou no próprio celular, vamos baixar um projeto para mostrar para vocês como faz para rodar ele dentro. No meu caso, vou mostrar do simulador, que é o que vocês conseguem ver.

Mas vocês podem fazer também utilizando o USB para rodar no celular e tudo mais, dependendo das configurações que vocês fizeram, segundo o artigo de instalação.

Vamos primeiro no GitHub que é: "github.com/alura-cursos/react-native-navegacao-entre-tela". Todas separadas por traço. Nessa página podemos ver o projeto do curso.

Nós, desenvolvedores, geralmente utilizamos Git, GitHub ou ferramentas semelhantes para hospedar os nossos projetos, fazer um portfólio, algo desse gênero.

E vocês também podes estudar mais sobre isso, mas nesse curso não será necessário vocês aprenderem Git ou qualquer outro tipo de coisa. Vocês vão conseguir fazer mesmo sem aprender Git.

Como vocês podem fazer? Rolando a tela para baixo, tem algumas informações sobre o projeto. Caso vocês queiram baixar o projeto em uma pasta, em um zip, para vocês fazerem mais facilmente, vocês podem. No "Acesso ao projeto", tem o projeto inicial e tem o "baixar o zip". Vocês podem clicar ou subir a tela até o "Code". Tem a opção “Download ZIP”, que vai ser o mesmo zip que vai ser baixado. Vocês podem baixar o projeto dessa forma.

Eu vou baixar com o Git para fazermos o mesmo processo e vocês já verem como funciona. Se vocês quiserem baixar pelo "Download ZIP", podem baixar também, tranquilo.

No caso de vocês já terem instalado o Git na sua máquina, geralmente vocês vão utilizar o Clone via HTTPS, mas eu tenho a chave SSH configurada no meu GitHub. Eu vou usar SSH, mas é o mesmo processo para ambas as URLs.

Primeiro eu preciso entrar dentro de uma pasta, eu vou dar o ~ cd alura, eu já tenho uma pasta chamada “alura”. E dentro dessa pasta chamada alura eu quero fazer um clone desse projeto. Eu vou colocar o comando alura git clone e vou colar a URL que ele virou via SSH ou HTTPS.

E eu também posso dar um nome para a pasta que eu quiser que ele crie o projeto, senão ele vai criar uma pasta com esse nome comprido. Eu vou resumir para rnnavegacao. Dei um "Enter", ele está clonando o projeto, foi bem rápido porque o projeto base está bem simples.

Agora eu entro dentro desse alura cd rnnavegacao. E, importante, se vocês já baixaram o projeto via ZIP, extrai ele e entra com um terminal dentro dessa pasta que vocês extraíram também.

Se vocês derem um git status, vocês vão ver que estão na branch main, no meu caso ele até mostra, mas pode ser que, dependendo do terminal, ele não mostre. E já estamos dentro do nosso projeto, só dei um ls para listar as pastas. Ele tem as mesmas pastas e os arquivos que estão mostrados aqui no GitHub.

Agora precisamos primeiro, antes de mais nada, instalar os pacotes do NPM, instalar os pacotes JavaScript do nosso projeto. Como fazemos isso? nmp install, ou, npm i. npm install.

Vou rodar e ele vai baixar e vai criar a pasta node modules. Vai baixar todas as dependências do meu projeto, as dependências JavaScript e, se estivermos utilizando o iOS, ainda precisamos instalar as dependências nativas da iOS.

Como podemos fazer isso? Se vocês estiverem no Windows ou no Linux, esse comando vocês não precisam fazer, mas caso vocês estejam fazendo aplicações para iOS, ou estejam no MacOS, npx pod-install.

Eu vou rodar uma biblioteca, NPX é uma biblioteca NPM que não está instalada na minha máquina, que é pod-install. E vou dizer para ela que eu quero rodar dentro da pasta ios, npx pod-install ios.

O que significa isso? É a mesma coisa que dar um cd ios, entrar na pasta iOS e executar o comando pod-install lá dentro. Mas para simplificar vou rodar o comando que escrevi.

Esse processo, se estiver no iOS, pode ser que demore um pouco mais do que o npm install. Vamos aguardar.

Pronto, já temos todos os pods instalados. Agora já temos as dependências iOS instaladas e vamos primeiro mostrar como faz para rodar no Android e depois vou mostrar como faz para rodar no iOS.

Primeiro, para as duas coisas vocês vão precisar rodar o npm start, que é o comando que vai startar o React Native na nossa máquina, que vai ficar rodando ali o bundle do React Native na nossa máquina.

Agora isso vai ficar aberto enquanto estivermos desenvolvendo essa janela do terminal, precisa ficar aberto.

Vou criar outra janela embaixo e vou entrar na pasta ~ cd alura/rnnavegacao, que foi a que acabamos de clonar o projeto, e vou dar um npm run android. Se eu quero rodar no Android, eu utilizo o comando npm run android.

E no Android pode ser que demore até bastante para ele gerar o build da aplicação. Daqui a pouco eu volto, quando estiver tudo instalado aqui.

Agora já rodamos o comando npm run android, demorou um pouco, 27 segundos. Não foi tanto, mas dependendo da sua máquina pode demorar mais ainda. E já temos a aplicação rodando no Android, já está pronto.

Já podemos, se você estiver utilizando o Android mesmo, se você não estiver utilizando o iOS, concluir. Continuar para as próximas partes do curso.

Ainda nesse mesmo vídeo, teremos uma observação de uma coisa, um detalhe. Na verdade, eu posso até falar dele agora, que é sobre uma correção que fizemos. Essa correção é do projeto em si, não tem nada a ver com a navegação, com o que vamos aprender.

Mas pode ser que vocês notem que, em alguns momentos durante o vídeo, quando navegamos entre a tela Home e a tela Melhores produtores, vocês vão ver que os produtores estão com estrelas diferentes entre uma aba e outra.

Isso estava acontecendo porque, cada vez que ele abria uma tela diferente, ele gerava uma nova lista de produtores.

Corrigimos isso basicamente fazendo com que produtores, nos nossos mocks, depois vocês vão ver mais, eles não sejam mais uma função e sim seja estático. Sempre que abrirmos a aplicação, ela vai carregar os produtores e vai mostrar os mesmos produtores, e não mais ter essa divergência.

Você vai baixar o projeto e vai seguir normalmente. Nos vídeos, pode ser que vocês notem essa diferença, mas isso não vai atrapalhar de maneira alguma no aprendizado sobre navegação.

Se vocês já instalaram, já configuraram o seu Android, está tudo certo, pode seguir para o próximo vídeo.

E agora vamos mostrar um pouco como funciona no iOS. Agora, para o iOS eu posso rodar o mesmo comando, npm run ios no terminal, dentro da pasta, para mandarmos ele rodar dentro do iOS.

Demora um pouco menos do que no Android, certamente, mas pode ser que aconteça como no meu caso aqui, um erro. Pode ser que está faltando alguma coisa ali.

Terminamos de indexar os arquivos e agora, se quiserem ainda, vocês podem mandar rodar a aplicação diretamente aqui pelo XCode. Por exemplo, ele está selecionando o iPod Touch, eu vou mudar para iPhone 13, que é o iPhone que está aberto no meu computador.

Mudei em cima o dispositivo para iPhone 13, vocês ainda podem colocar o teu iPhone mesmo, se ele estiver listado, engatando no computador via USB. Basta eu dar um play, vamos ver o que acontece, "play".

Eu fechei o simulador do Android para otimizar o carregamento do iOS. Depois de um tempo, ele terminou o build e apareceu uma mensagem de sucesso. Também está abrindo o nosso simulador, carregando a nossa aplicação React Native.

Pronto, agora já temos a aplicação rodando. Mas vocês precisam fazer tudo isso cada vez que você for rodar? Não, não precisam.

Eu vou fechar o nosso XCode e vou parar as tasks também, que são os projetos que estava rodando. Agora se eu vier no terminal de novo, tinha dado erro, rodar o npm run ios.

Já podemos rodar a nossa aplicação iOS tranquilamente sem precisar fazer todo esse processo. Ele vai buildar no terminal, vai mostrar e daqui a pouco dá o sucesso e já podemos ver a nossa aplicação rodando no simulador. Sucesso. E nossa aplicação vai abrir novamente no simulador iOS.

Ele disse que deu um erro, que ele parou inesperadamente. Vamos clicar para reabrir, "Reopen". Não podemos porque a aplicação não é suportada no Mac.

Acho que ele rodou no Mac, mas vamos tentar de novo. Abre terminal, npm run ios, "Enter". Vamos aguardar a instalação. Agora sim.

Agora temos a nossa aplicação rodando aqui no iOS. Pode ser que, nesse primeiro momento, a primeira instalação dê alguns problemas dependendo do seu sistema operacional, das versões da biblioteca que vocês estão utilizando.

Se vocês tiverem algum problema, vocês podem tentar conversar conosco no fórum. Alguém pode ter o mesmo problema que vocês e já solucionamos isso para vocês.

Agora vamos partir para entender melhor o que é o projeto, o que são esses arquivos que estamos baixando. Te vejo em breve.

Apresentando a navegação - Introdução do projeto

Agora que já baixamos a nossa aplicação, já rodamos ela, vamos ver o que temos no código que já existe.

Eu vou seguir o checklist no Notion para não esquecermos de nada. Começando pelos mocks, se viermos no nosso projeto, vou abrir pelo Visual Studio Code, o VS Code.

Podemos abrir a pasta "mocks", que está na coluna da esquerda. E nessa pasta temos dois arquivos, “textos.js” e “produtores.js”. Abrindo a pasta "textos.js", teremos os textos da nossa aplicação.

Temos o Boas-Vindas que está escrito "Olá, Natália". Se eu alterar, botar mais um A e salvar, atualiza já na tela diretamente, está pegando tudo do código.

E também temos a mesma coisa para os produtores, lembrando que a distância que está mostrando é aleatória e as estrelas também são aleatórias, cada vez que recarregamos a aplicação ele gera novas distâncias e novas classificações. E ordena também pela distância do produtor, pode ser que a ordem de produtores sempre mude conforme formos atualizando.

Esses textos acessamos na coluna da esquerda, pelo caminho "servicos > carregaDados.js", pela coluna da esquerda, que vai carregar os produtores e carregar os textos. Ele é para simular que estamos requisitando de algum outro lugar.

Como vamos fazer para pegar esses dados dentro da nossa tela? Através do "hooks > useTextos.js” que pega os textos do “carregaTextos.js” e também temos o hook de “useProdutores.js” que vai carregar os produtores, vai ordená-los também.

E se (melhoresProdutores) for True ainda vai filtrar só pelos produtores que têm avaliação maior que 3. Ou seja, só os produtores que têm 4 ou 5 estrelas. Já vimos de onde vem os dados da nossa aplicação, eu vou marcar que já vimos os mocks.

Agora vamos dar uma olhada na Home. A Home é a tela que vocês estão vendo rodando no simulador.

Tela Home do aplicativo do nosso projeto, como foi descrita

Ela é para ser a primeira tela que abre na aplicação. Temos no canto superior esquerdo a logo do orgs, temos, na parte de cima, as boas-vindas, logo abaixo uma mensagem "Encontre os produtores mais próximos de você", que está ordenado pelos produtores mais próximos mesmo.

Se clicamos em algum produtor, nada acontece, esses produtores em formato de card já vão ter as informações como distância e imagem, e classificação, as estrelas.

Agora vamos dar uma olhada como é o código dessa parte da aplicação. O código da tela Home vai estar em "telas > Home". Começamos pelo “index.js”, também temos o “Topo.js” e “Produtor.js” dentro de componentes.

Vamos dar uma olhada no "index.js". Ele recebe os melhores produtores, vai receber um booleano para saber se ele mostra todos os produtores ou os produtores apenas que são melhores.

Repara que esse componente se chama Produtores e não home, depois daremos uma organizada nisso. E utilizamos o hook de useProdutores() passando se é (melhoresProdutores) ou não.

Temos também uma lista que é exibida pelo <FlashList/> com o topo dela, que vai usar esse componente do topo que está dentro da pasta componentes da Home.

E também vai exibir o {tituloProdutores}, que é o título da nossa lista de produtores, e cada produtor vai ser renderizado por meio do componente Produtor que está dentro da pasta componentes da nossa Home.

E, ao pressionar, como podemos ver, cada produtor não faz nada, é uma função vazia. Por isso que quando clicamos nada acontece, depois vamos implementar essa funcionalidade.

Temos aqui também alguns estilos. Se viermos no topo é bem tranquilo, temos a imagem, é a imagem de logo do orgs, e temos os textos de boas-vindas, também o texto debaixo que muda dependendo se vai ser melhores produtores ou não. Se for melhores produtores, depois veremos, vai exibir uma mensagem diferente ao invés dos mais próximos.

Temos o Produtor em si que é o card. O card é um <TouchableOpacity/> que é um clicável, ele faz a opacidade. Ao pressionar é a função onPress, por isso não está acontecendo nada. Temos a imagem, o texto, as estrelas, tudo isso que já sabemos.

As estrelas vem dos componentes. Na coluna da esquerda temos uma pasta chamada "componentes" na raiz do nosso "src", na raiz dos nossos códigos, que vai ter os componentes que são compartilhados entre mais telas. As estrelas estão nessa pasta, "componentes > Estrelas.js".

Fazemos a renderização das estrelas e ele já está pronto, esse componente, não precisamos mexer nele. Vai ter um componente de estrela que é cada estrela separada para podermos fazer essa classificação em formato de estrelas.

Podemos marcar que já vimos a nossa Home. Vamos dar uma olhada no nosso arquivo de "Cesta". O que é a nossa Cesta? Não está dando para ver na tela da aplicação.

Vamos abrir o “App.js” na descendo a coluna da esquerda. Vou fechar as outras abas que abrimos, fecha tudo e podemos abrir o "App.js" bem na raiz, fora mesmo até o “src”.

E temos duas telas, a tela de produtores está comentada. Então eu vou comentar a <Home/>, usando /* no começo da linha e */ ao final, e descomentar a tela de produtores que é todo o código que está abaixo, tirando esses símbolos. Ele vai usar o hook de produtor para pegar os produtores e pegar o primeiro produtor e exibir só de exemplo.

Essa é a tela de Cesta. A primeira cesta do primeiro produtor. Temos essa tela pronta também, é a tela final, quando clicamos em "Comprar" vamos fazer alguma coisa com isso, temos que chegar nessa tela também, passar entre as outras telas.

Tela de detalhes da cesta do produtor. Na metade superior tem a imagem de um ramo de cebolinha no canto direito de um fundo branco com uma faixa vinda da esquerda para direita em amarelo claro. Abaixo da imagem tem o título "Brócolis e Pepino" e as informações do produtor e da cesta

E basicamente temos o topo, temos o título da cesta que é Brócolis e Pepino, e a fazenda que é a Green. Tem uma descrição, o valor e os itens da cesta como outra lista. Se olharmos essa nossa tela de cesta também está aqui, dentro de “src > Telas > Cesta”.

Temos um “index.js”, que vai ser a exibição da nossa lista e, dentro da nossa lista, temos o Header que é toda a parte de cima da tela, tirando a lista.

Como queremos otimizar a nossa lista, sempre temos que fazer com que a lista seja o componente principal da nossa aplicação. E tudo que estiver em cima botamos no Header, tudo que estiver embaixo botamos no Footer.

Temos o <Topo/> que vai exibir a imagem, já vai fazer o botão de voltar, tudo certo. Temos aqui dentro também uma <View> que tem os detalhes do texto e o título dos itens da cesta, que é o {tituloItens}.

Isso basicamente é a nossa tela de cesta. Também usando o hook de useTextos() para pegar esses textos todos. Vamos marcar que já vimos a nossa Cesta.

E vamos dar uma olhada nos melhores produtores agora. O que é os melhores produtores? É outra tela que queremos fazer, queremos fazer uma tela em que veremos só os produtores com 4 estrelas ou mais.

Já temos essa tela pronta embutida nos produtores, basta passar, como eu falei antes, o true no melhores produtores. Eu vou comentar novamente o trecho de código, com /* */. Vou descomentar o Home. Vou dar à <Home/> no “App.js”. No componente <Home/> do melhoresProdutores eu vou passar true ao invés de false, <Home melhoresProdutores={true} />.

E já temos essa tela de melhores produtores, ela vai ter um título diferente, não vai ter o “Olá, Natália”, vai ter só “Veja os produtores com 4+ estrelas!”. E mesma coisa na Home, clica e não acontece nada.

Tela com os melhores produtores. Similar à tela Home, mas sem a saudação. Na parte superior tem o texto “Veja os produtores com 4+ estrelas!”, seguido de "Produtores" e, abaixo, o card dos produtores com as informações deles, ou seja, logo, nome, estrelas e distância

Se recarregarmos sempre vai mudar. Pode ser que não tenha nenhum produtor com 4 estrelas, pode ser que tenha um só. Esse tem 4, 5 e 4, antes tinha só 5 estrelas.

Assim é a nossa tela de melhores produtores. Queremos fazer com que possamos acessar essas duas telas facilmente. Se dermos uma olhada no layout, será por meio da parte inferior da dela. E poderemos acessar tanto a Home com todos os produtores, quanto os melhores produtores.

Melhores produtores já vimos, já passamos pelos produtores. Tem a tela de Produtor, que é a tela intermediária entre a cesta e a tela de Home ou a tela de Melhores Produtores. Aqui poderemos listar as Cestas da nossa aplicação, clicar em uma delas e entrar na cesta em si.

Tela de cestas. Aparece uma imagem com vegetal no cabeçalho, a logo e o nome do produtor, o subtítulo "Cestas" e a lista de cestas, com a logo do vegetal à esquerda, o nome e a descrição à direita e o preço no final do card

Essa tela vamos implementar. Claro que muita coisa já temos pronto, por exemplo, já temos o topo com a imagem, o ícone, já sabemos como fazer uma lista. Vamos conseguir fazer isso bem rápido.

Vamos marcar a tela de Produtor como completa. Então já vimos tudo que tem na nossa aplicação. Te vejo em breve.

Sobre o curso React Native: criando menu e navegando entre telas

O curso React Native: criando menu e navegando entre telas possui 181 minutos de vídeos, em um total de 45 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React Native acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas