Navegação em Aplicativos React Native com Expo Router
Paulo Clemente
Navegação Rápida:
A navegação em aplicativos móveis e web é um aspecto fundamental para proporcionar uma experiência de usuário suave e intuitiva. Tradicionalmente, gerenciar a navegação em projetos React Native exigia uma abordagem mais manual e, muitas vezes, complexa. No entanto, com a introdução do Expo Router, esse cenário está mudando, trazendo uma nova era de simplicidade e eficiência para desenvolvedores de aplicativos universais.
O Que é Expo Router?
O Expo Router é um sistema de roteamento baseado em arquivos, projetado para aplicações React Native e web. Inspirado pelos melhores conceitos de roteamento de sistemas de arquivos do desenvolvimento web moderno, o Expo Router facilita a implementação de uma navegação eficaz e intuitiva em aplicativos, permitindo que eles funcionem perfeitamente em todas as plataformas — Android, iOS e web — com mínima configuração.
A Simplicidade por Trás do Expo Router
A filosofia do Expo Router é baseada na simplicidade. Adicionar uma nova tela ao seu aplicativo é tão fácil quanto criar um novo arquivo no diretório apropriado. Esse arquivo então se torna automaticamente uma rota acessível no seu aplicativo, eliminando a necessidade de definir explicitamente as rotas em um arquivo de configuração centralizado.
Vantagens do Uso do Expo Router
Universalidade
O Expo Router foi criado com a universalidade em mente. Ele permite que os desenvolvedores criem aplicativos que ofereçam uma experiência de usuário consistente em todas as plataformas, utilizando os mesmos componentes React Native e web. Isso não apenas melhora a eficiência do desenvolvimento, mas também garante que os aplicativos mantenham uma aparência e funcionamento uniformes, independentemente do dispositivo.
Facilidade de Uso
Graças à sua abordagem baseada em arquivos, o Expo Router simplifica significativamente o processo de adição e gerenciamento de rotas em um aplicativo. Essa facilidade de uso permite que desenvolvedores concentrem mais tempo e recursos no aprimoramento da experiência do usuário, em vez de lidar com a complexidade da configuração de navegação.
Flexibilidade
Embora o Expo Router promova uma abordagem convencional para a criação de rotas, ele também oferece a flexibilidade necessária para atender a casos de uso mais complexos. Isso inclui suporte para rotas dinâmicas, permitindo que os desenvolvedores implementem funcionalidades avançadas de navegação de forma intuitiva e eficiente.
Convenção de Roteamento com Expor Router
O Expo Router introduz uma abordagem revolucionária para o roteamento em aplicações React Native e web, utilizando uma convenção de roteamento baseada em arquivos. Essa abordagem simplifica significativamente o processo de adicionar novas rotas e páginas ao seu aplicativo, tornando-a uma ferramenta indispensável para desenvolvedores modernos.
Com o Expo Router, cada arquivo criado no diretório
app automaticamente se torna uma rota na aplicação. Por exemplo, os seguintes arquivos resultarão nas rotas correspondentes:app ├── index.js -> corresponde a '/' ├── home.js -> corresponde a '/home' ├── [user].js -> corresponde a caminhos dinâmicos ├── settings │ └── index.js -> corresponde a '/settings'
Páginas com Expo Router
As páginas são definidas exportando um componente React como o valor padrão de um arquivo no diretório
app. Os arquivos devem usar uma das extensões .js, .jsx, .tsx, .ts.Por exemplo, crie o diretório app no seu projeto e, em seguida, crie um arquivo index.js dentro dele. Adicione o seguinte trecho:
import { Text } from 'react-native'; export default function Page() { return <Text>Página inicial</Text>; }
O exemplo acima corresponde à rota
/ no aplicativo e no navegador. Arquivos nomeados index correspondem ao diretório pai e não adicionam um segmento de caminho. Por exemplo, app/settings/index.js corresponde a /settings no aplicativo.Rotas Dinâmicas com Expo Router
Rotas dinâmicas correspondem a qualquer caminho não correspondido em um determinado nível de segmento.
Rotas com maior especificidade serão correspondidas antes de uma rota dinâmica. Por exemplo, /blog/roxo corresponderá a
blog/roxo.js antes de blog/[id].js.Vários slugs podem ser correspondidos em uma única rota usando a sintaxe de rest (...). Por exemplo,
app/blog/[...id].js corresponde a /blog/123/settings.Segmentos dinâmicos são acessíveis como parâmetros de pesquisa no componente da página.
import { useLocalSearchParams } from 'expo-router'; import { Text } from 'react-native'; export default function Page() { const { slug } = useLocalSearchParams(); return <Text>Post do blog: {slug}</Text>; }
Adotando o Expo Router, desenvolvedores podem aproveitar ao máximo a conveniência e eficiência do roteamento baseado em arquivos, agilizando o desenvolvimento de aplicativos React Native e web com uma experiência de usuário coesa e integrada.
Vem ver na prática a customização de um Drawer Navigation com Expo Router
