No dinâmico e constantemente evoluindo mundo do desenvolvimento de aplicativos móveis, escolher as ferramentas de navegação corretas pode impactar significativamente a eficácia e eficiência de seus projetos. Entre essas ferramentas, o expo-router surgiu como um forte concorrente. Ele visa redefinir nossa compreensão da navegação em aplicativos React Native, oferecendo uma abordagem única para lidar com a navegação. Essa abordagem inclui várias características promissoras que simplificam o processo de desenvolvimento, fortalecem a experiência do usuário e garantem a futurabilidade dos aplicativos.

No entanto, como todas as tecnologias, o expo-router possui certas desvantagens. Este artigo explora as vantagens e desvantagens do expo-router, fornecendo insights sobre sua funcionalidade e potenciais casos de uso. Além disso, compartilharemos nossos planos em relação à sua adoção em nossos projetos futuros.

Uma Mudança de Paradigma

react-navigation, uma abordagem declarativa
No React Navigation, você define a estrutura de navegação usando objetos JavaScript e componentes React. Aqui está um exemplo simples:

import { Text, View } from ‘react-native’;
import { NavigationContainer } from ‘@react-navigation/native’;
import { createStackNavigator } from ‘@react-navigation/stack’;

const Screen1 = () => Screen1

const Stack = createStackNavigator();

const StackNavigator = () => {
return (

);
}

export default function App() {
return (

);
}

A natureza declarativa do React Navigation significa que você não precisa gerenciar manualmente o estado da sua navegação ou lidar com transições entre telas. Em vez disso, você define a estrutura da sua navegação (com a declaração de navegadores e telas) e as condições sob as quais determinadas telas devem ser exibidas, e o React Navigation cuida do restante. Isso facilita a criação de navegadores dinâmicos com base no estado da aplicação.

No entanto, declarar cada rota e cada navegador envolve muita configuração manual e pode levar a problemas de manutenção à medida que sua aplicação cresce. É aqui que entra o expo-router e seu paradigma de roteamento baseado em arquivos. ⬇️

Roteamento baseado em arquivos com
expo-router

Com o roteamento baseado em arquivos, o framework gera automaticamente rotas com base na estrutura de arquivos do seu projeto, eliminando a necessidade de configuração explícita de rotas. O diretório das suas páginas se torna um reflexo imediato das rotas da sua aplicação.

import { createStackNavigator } from ‘@react-navigation/stack’;

const Stack = createStackNavigator();

const StackNavigator = () => {
return (

);
}

Transforma-se em:

Vantagens:

• Simplicidade: As rotas são geradas automaticamente com base na estrutura de arquivos, eliminando a necessidade de configuração explícita de rotas.
• Legibilidade: A estrutura de arquivos reflete diretamente a estrutura de roteamento do aplicativo, facilitando o entendimento do fluxo da aplicação e a abertura da tela correta que você procura.
• Consistência: O roteamento baseado em arquivos impõe um padrão consistente para definir rotas, resultando em um código mais previsível.
• Familiaridade: É um paradigma antigo e comumente usado que podemos encontrar em outros frameworks como NextJS.

Desvantagens:

• Flexibilidade Limitada: A estrutura das suas URLs está vinculada à estrutura de arquivos do seu projeto. Isso pode ser limitante em alguns casos, especialmente se você precisar criar regras de roteamento complexas que não se encaixam facilmente em um sistema baseado em arquivos. Por exemplo, navegação dinâmica baseada em uma máquina de estado onde as telas podem não existir dependendo do usuário.
• Mudança de Paradigma: Haverá uma curva de aprendizado para entender e usar efetivamente o roteamento baseado em arquivos.

Fornecer navegação segura em tempo de execução?
Embora a navegação segura por tipos seja importante, nem sempre é suficiente. Em um artigo anterior, demonstrei um cenário usando o react-navigation que pode levar a erros mesmo quando não há erros de TypeScript, devido a um manuseio inadequado da tipagem do useNavigation.

Nessa situação, se o código navigation.navigate("ScreenTwo") for chamado a partir de ScreenThree, teremos um erro em tempo de execução porque ScreenTwo não está definido no mesmo navegador que ScreenThree. Em vez de empurrar identificadores de tela arbitrários para a pilha, uma possível solução é navegar a partir da raiz do aplicativo, com a seguinte invocação:

navigation.navigate(“ChildNavigatorOne”, { screen: “ScreenTwo” });

A navegação baseada em URL usa exatamente o mesmo padrão para declarar a navegação a partir da raiz da aplicação. O expo-router sempre sabe exatamente onde encontrar a tela associada a uma URL estática, protegendo-o do problema mencionado acima.

Para URLs dinâmicos modificados em tempo de execução, ainda há um risco de criar uma URL inválida. Felizmente, você pode implementar uma rota dinâmica que corresponderá a todas as navegações não tratadas no expo-router.

expo-router é a biblioteca que pode fazer você abandonar (pelo menos parcialmente, pois ainda depende muito dele) o react-navigation. A migração do react-navigation para o expo-router será mais fácil se suas telas e seus navegadores estiverem isolados do restante da sua base de código.

O que aconteceu com o meu arquivo App.tsx?

Na documentação de configuração do expo-router, você será solicitado a configurar seu ponto de entrada index.js para conter apenas a seguinte importação:

A solução para nosso problema está na funcionalidade de layout disponível no expo-router. Você pode criar um layout raiz que definirá os contextos do seu aplicativo e retornará o componente Slot do expo-router, responsável por renderizar o restante da navegação.

Conclusão

Expo-router é um desenvolvimento empolgante no ecossistema do React Native, prometendo redefinir como abordamos a navegação em aplicativos móveis. Quer aprofundar ainda mais seus conhecimentos? Confira nosso mini-curso completo no link abaixo:
https://developerflix.com/serie/explorando-o-expo-router-um-mini-curso-intensivo/

• 0 Comments
• desenvolvimento
• Expo Router
• tecnologia