React Native: navegando entre telas com expo router

Introdução ao Curso de React Native

Olá! Sejam muito bem-vindos a mais este curso de React Native. Estamos aqui para explorar a navegação no desenvolvimento mobile. Meu nome é Vinícius Neves, conhecido como o "Deve Careca Barbuda" da Alura, e estarei acompanhando vocês no desenvolvimento do Focus.

Audiodescrição: Vinícius é um homem branco, com barba e cabelo raspado. Ele veste uma camiseta preta e está em um ambiente de estúdio com fundo neutro.

Continuação do Curso Anterior

Este curso é uma continuação direta do curso anterior, onde começamos apenas com a tela do Pomodoro. Desenvolvemos um cronômetro que possui as funções de Focus, pausa curta e pausa longa. Agora, o que faremos? Observem o tamanho deste Figma; há mais telas para desenvolvermos. Temos uma tela inicial, um menu de navegação, uma tela para listar tarefas, onde as tarefas podem ser marcadas como completas ou não. Também adicionaremos tarefas, entre outras funcionalidades.

Demonstração do Aplicativo

Vamos observar o aplicativo em funcionamento. Estou com um simulador na tela e vou administrar o VS Code.

Temos nossa lista de tarefas, que finalizamos com três itens: estudar JavaScript, estudar React Native, e a tela do temporizador do Pomodoro. Ao recarregar, ainda visualizamos nossa tela inicial, onde não exibimos o menu de navegação. Precisamos clicar em "quero iniciar". Há muitos aspectos interessantes para aprendermos neste curso.

Pré-requisitos e Objetivos do Curso

Como vamos focar no React Native, é essencial que tenhamos conhecimento prévio em React e na Context API do React. Os pré-requisitos estarão detalhados, mas se já dominamos o React e completamos o curso anterior, estamos aptos a continuar desenvolvendo este aplicativo.

Desenvolvimento e Aprendizado

Vamos começar a desenvolver. Estamos animados para implementar todas essas funcionalidades. Vamos transformar o aplicativo de uma tela estática e única em um aplicativo com várias telas, navegação, segmentação dinâmica e cuidado com o scroll. Há muito para aprender, e a jornada será incrível.

Introdução ao Projeto Focus

Vamos desenvolver o projeto Focus, que está aguardando para ser trabalhado. A primeira etapa é ressuscitar o projeto do curso anterior. Se completamos o curso anterior, teremos a mesma base de código. Caso contrário, podemos acessar o link para o projeto base na seção de preparação do ambiente, começando assim do mesmo ponto.

Planejamento e Estrutura do Projeto

Atualmente, estamos com o Figma do projeto aberto para discutir o que será feito. No simulador do iOS, nossa aplicação já gerencia o Pomodoro, com foco, pausa curta, pausa longa e cronômetro funcionando, permitindo pausar e iniciar. Neste curso, desenvolveremos mais telas. No Figma, podemos ver que teremos uma tela inicial de boas-vindas, permitindo iniciar a aplicação. Em seguida, teremos a página do Pomodoro, que já existe, e um menu de navegação chamado Drawer. Este menu lista o timer (Pomodoro) e a lista de tarefas, que será desenvolvida ao longo das aulas. Vamos criar, editar, excluir e marcar tarefas como completadas, uma funcionalidade nova que requer um fluxo de navegação.

Utilização do Expo Router

Dentro do ecossistema do Expo, utilizaremos o Expo Router. A documentação está disponível em expo.expo.dev.router.advanced.stack. O conceito de stack (pilha) será utilizado para empilhar a navegação, permitindo retornar à página anterior. Vamos implementar essa navegação.

Configuração do Layout Base

A documentação é a fonte de verdade sobre o funcionamento do Expo e do router. Um arquivo que deletamos no curso anterior, mas que agora será necessário, é o layout base. Dentro da pasta "app", a documentação sugere criar o arquivo _layout.jsx, pois não estamos usando TypeScript. Neste arquivo, importaremos o stack para que o React Native e o Expo reconheçam a navegação.

import { Stack } from 'expo-router/stack';
export default function Layout() {
return <Stack />;
}

Estrutura de Arquivos e Telas

O Expo identifica telas diferentes pela estrutura de arquivos na pasta "app". Por exemplo, ao criar um arquivo pomodoro.jsx, o Expo Router reconhecerá que há uma tela com o caminho relativo "pomodoro". Se já trabalhamos com Next.js, o conceito é semelhante. Caso contrário, não é necessário se preocupar, pois controlaremos as telas com base nos nomes dos arquivos e pastas.

Transferência de Conteúdo para o Componente Pomodoro

Criamos o arquivo pomodoro.jsx porque o comportamento atual da página inicial é o Pomodoro, mas queremos que essa funcionalidade fique no arquivo pomodoro.

export default function Pomodoro() {
  // Conteúdo do Pomodoro
}

Vamos transferir todo o conteúdo do arquivo index.jsx para dentro do componente Pomodoro. Como estamos no mesmo nível de diretório, basta usar "Ctrl+X" para cortar e colar. Um detalhe importante é que, na linha 29, onde antes fazíamos o export default function index, não queremos mais chamar de index, pois essa tela não é mais a página inicial. Vamos chamá-la de Pomodoro. Após salvar, no nosso index.js, criaremos uma nova função para representar a tela inicial. No Figma, podemos ver que essa é a nossa tela inicial. Não queremos iniciar diretamente no Pomodoro, por exemplo, então começaremos criando o componente React.

Criação da Tela Inicial

Vamos fazer um export default function e chamá-lo de index, pois essa será a nossa tela inicial. Retornaremos o JSX e podemos aproveitar para fazer um refresh. Não podemos retornar texto puro, pois estamos no ambiente do React Native. Portanto, criaremos uma View (com V maiúsculo). O VS Code já sugere importar a View do React Native, e faremos isso. Também não podemos inserir texto diretamente; devemos usar o componente Text do React Native. Novamente, o VS Code sugere a importação, e confirmamos. Chamaremos de "home" e, por enquanto, será isso. Alteramos nossa página inicial, e o Expo já reconhece que o index.jsx é a tela inicial. Agora temos o Pomodoro, que é uma navegação que podemos criar. No simulador, aparece "home" no canto superior esquerdo.

import { Text, View } from "react-native";
export default function Index() {
return (
<View>
<Text>Home</Text>
</View>
);
}

Implementação da Navegação com Link

Para fazer a navegação entre telas no ecossistema do React Native, que é amigável para quem já conhece React, usaremos um componente chamado Link, importado do ExpoRouter. Dentro do texto, colocaremos "quero iniciar", que será o botão da tela. Para definir para onde o link levará, usaremos um href. Em vez de passar diretamente a URL, passamos um objeto de configuração com a informação pathName, que funciona como um endereço da web. O pathName será "/Pomodoro", que é nossa página Pomodoro. O nome do arquivo coincide com o pathName, e não precisamos incluir .jsx, apenas "/Pomodoro".

import { Text, View } from "react-native";
import { Link } from "expo-router";
export default function Index() {
return (
<View>
<Text>Home</Text>
<Link href={{ pathname: '/pomodoro' }}>
Quero iniciar!
</Link>
</View>
);
}

Teste e Solução de Problemas no Simulador

Vamos testar no simulador. O botão "quero iniciar" aparece sem estilo, pois ainda não aplicamos nenhum. Ao clicar, se houver um erro dizendo que não encontrou a rota pathName Pomodoro, podemos resolver parando o npm start no terminal e executando novamente. Após recarregar a página, o botão "quero iniciar" funcionará. Quando mudamos muito a estrutura de arquivos, o Expo pode não conseguir fazer o hot reload corretamente. Paramos o npm start, executamos novamente, e agora o Expo adiciona um cabeçalho automaticamente. O botão de voltar também é gerado pelo Expo, permitindo retornar à index.

Conclusão da Primeira Navegação

Concluímos nossa primeira navegação entre telas, mas ainda estamos longe do resultado final desejado. Este é apenas o primeiro passo, mas foi muito importante. Nos encontramos no próximo vídeo para continuar.

Configuração Inicial do Fluxo de Navegação

Já temos nosso fluxo de navegação entre telas funcionando. Nossa página inicial está exibindo um cabeçalho que não era exibido anteriormente, e o Stack está fazendo isso por nós. O botão "Quero Iniciar" está direcionando para a página de Pomodoro. No entanto, essa página de Pomodoro agora possui um cabeçalho que não deveria estar presente, conforme o layout no Figma. Precisamos customizar isso.

Removendo o Cabeçalho da Página de Pomodoro

Para remover o cabeçalho da página de Pomodoro, vamos ao VS Code e abrimos o arquivo layout_underline_layout.jsx. É nesse arquivo que faremos a configuração da nossa rota específica. Inicialmente, temos o retorno do stack como uma tag de fechamento automático:

return <Stack>
</Stack>;

Para permitir customizações, colocaremos tudo entre parênteses, abrindo e fechando o stack:

return (<Stack>
</Stack>);

Dentro do stack, chamaremos outro componente que começa com stack, mas não queremos um stack dentro de outro stack. Queremos um componente chamado screen. Vamos usar stack.screen para definir a tela:

<Stack.Screen />

Configurando a Tela Pomodoro

Precisamos informar ao stack qual é o nome ou path name dessa tela específica. Vamos configurar o nome como "pomodoro":

<Stack.Screen name='pomodoro'/>

Para essa tela específica, podemos fazer várias customizações. Podemos passar, como propriedade para o stack.screen, uma prop chamada options:

<Stack.Screen name='pomodoro' options={{}}/>

Ao pressionar control + espaço, o VS Code mostrará todas as opções disponíveis, como title, status bar, header title, entre outras. Queremos uma opção específica: esconder o cabeçalho. Para isso, usamos a prop headerShown. Por padrão, esse valor é true, o que significa que o stack exibe o cabeçalho automaticamente. Para esconder o cabeçalho, definimos headerShown como false:

options={{ headerShown: false }}

Isso ativará o hot reload, e o cabeçalho não aparecerá mais no simulador. Vamos quebrar algumas linhas para melhorar a legibilidade do código, como no name, options e ao fechar o stack.screen:

<Stack.Screen
    name='pomodoro'
    options={{ headerShown: false }}
/>

Considerações sobre Customizações de Layout

Essa é a estrutura básica de um roteador. Nosso stack possui vários tipos de roteadores diferentes, mas ele contém telas, e essas telas possuem opções configuráveis.

Repare que essa configuração é totalmente opcional. Se comentarmos esse código, ele retornará com o header, e o comportamento continuará o mesmo:

{/* <Stack.Screen
    name='pomodoro'
    options={{ headerShown: false }}
/> */}

Quando devemos intervir no layout, dentro do stack, e especificar algo para o router? Quando queremos customizar. Quando desejamos tratar um caso especial e indicar que, nesse caso específico, o comportamento deve ser diferente. Foi isso que fizemos agora. No caso da tela Pomodoro, decidimos não exibir o header. Assim, o headerShown (ou seja, "exibe o header") está configurado como falso. Não queremos que o header seja exibido.

Organização de Imagens no Projeto

Dessa forma, configuramos partes específicas de uma tela dentro do ExpoRouter. Como estamos preparando nosso projeto para receber novas funcionalidades, há mais uma tarefa a ser feita: organizar as imagens que temos. Dentro da pasta app, temos os arquivos long.png, pomodoro.png e short.png. Atualmente, essas imagens estão na raiz do projeto. Como mencionado anteriormente, nosso roteador fará o roteamento baseado em nomes de partes e arquivos. Podemos usar a estrutura do próprio Expo para melhorar essa organização. Em vez de manter as imagens na raiz do projeto, vamos movê-las para a pasta "Assets".

Após mover as imagens, o compilador indicará que não consegue mais encontrar o arquivo pomodoro.png. Precisamos ajustar o caminho para essa imagem no arquivo pomodoro.jsx. Nas linhas 12, 18 e 24, o caminho não é mais ./nome_da_imagem. Agora, devemos voltar uma pasta, acessar "Assets", e dentro de "Assets", acessar a pasta "Imagem", onde está o arquivo pomodoro.png:

image: require('../assets/images/pomodoro.png'),

Vamos aplicar esse mesmo caminho relativo para o Require e corrigir os outros arquivos:

image: require('../assets/images/short.png'),

image: require('../assets/images/long.png'),

Testando e Corrigindo Erros no Emulador

Após salvar, pediremos ao emulador para tentar executar novamente. Se ocorrer algum problema, como o NPM Start se perder, devemos parar e reiniciar o NPM Start, abrir no iOS e fazer um reload. Caso o arquivo pomodoro.png não seja encontrado, devemos verificar se o nome do arquivo está correto.

Se houver um erro, como tentar acessar diretamente "assets" em vez de "imagens", devemos corrigir. Após ajustar, o Expo deve se recuperar e carregar corretamente. Verificamos se todas as imagens, como pausa curta e pausa longa, estão carregadas. O problema anterior ocorreu porque o nome do arquivo estava correto, mas o caminho estava errado. O Expo não consegue adivinhar automaticamente o que estamos fazendo.

Portanto, movemos nossas imagens para a pasta "imagens" dentro de "assets" e, no nosso layout, temos a customização para a tela do Pomodoro. Estamos progredindo bem, mas ainda há muito a ser feito. Vamos continuar evoluindo este aplicativo, que receberá muitas funcionalidades interessantes.