Roteamento nativo reinventado com o Expo Router

O roteamento baseado em arquivo é uma técnica comum de desenvolvimento da Web que mapeia um caminho de URL para um arquivo específico em um diretório de projeto. Este sistema evita as complexas configurações de roteamento envolvidas com a construção de sistemas de navegação.

Com o lançamento da biblioteca Expo Router, o roteamento baseado em arquivo é possível com aplicativos React Native. O Expo Router pode ser um sistema de navegação melhor para desenvolvedores React Native que trabalham com Expo.

Navegação reinventada com o Expo Router

O roteador expo fornece uma solução de roteamento declarativa para aplicativos React Native Expo. Este sistema é consideravelmente diferente de como você faria construir um sistema de navegação usando o React Navigation. O Expo Router elimina as principais preocupações com o uso do sistema de navegação atual.

Esses problemas incluem ter um sistema de navegação que não funciona consistentemente em todos os lugares, dificuldades no gerenciamento de links diretos e também configurações complexas para transições de navegação personalizadas.

A navegação/roteamento baseado em arquivo do roteador expo é um sistema simples que funciona bem e já é familiar entre desenvolvedores de JavaScript e frameworks de JavaScript como Next.js, onde você pode definir rotas.

Instalando e Configurando o Expo Router

É bastante simples migrar seu projeto Expo do antigo sistema de navegação para usar o roteador Expo.

Passo 1: Instale o Expo Router

Use este comando de terminal para executar o instalador do expo-router:

npx expo instalar expo-router

Você também precisará garantir que instalou essas dependências de mesmo nível:

• react-native-safe-area-context
• telas-nativas de reação
• expo-linking
• barra de status de exposição
• manipulador de gestos nativo de reação

Se algum estiver faltando, você pode instalá-lo executando:

instalação da exposição npx 

Etapa 2: atualize o ponto de entrada

Crie um novo index.js arquivo para substituir o existente App.js ponto de entrada e defina o index.js como o ponto de entrada do aplicativo dentro app.json:

// Definir index.js como ponto de entrada
{
"principal": "index.js"
}
// Importe o seguinte dentro de index.js
importar"expo-router/entrada";

Expo Router usa um link profundo esquema para determinar qual tela ou conteúdo abrir durante o roteamento.

Defina um esquema de links diretos para seu aplicativo adicionando um esquema propriedade para app.json:

{
"expo": {
"esquema": "meu aplicativo"
 }
}

Etapa 4: configuração final

A última etapa é configurar o agrupador metro do aplicativo Expo e configurar o Babel para oferecer suporte ao Expo Router em seu aplicativo.

Dentro babel.config.js modifique o código existente para ficar assim:

módulo.exportações = função (api) {
 api.cache(verdadeiro);
retornar {
 predefinições: ["babel-preset-expo"],
 plug-ins: [
exigir.resolver("expo-router/babel"),
/* */
 ],
 };
};

Agora reconstrua e inicie seu aplicativo executando:

npx expo --claro

Construindo as rotas do seu aplicativo com o Expo Router

Você pode começar a configurar um fluxo de navegação dentro do aplicativo pasta. O index.js arquivo é o seu ponto de partida. O Expo Router adiciona o caminho de cada arquivo que você cria dentro aplicativo ao sistema de roteamento do aplicativo com links profundos de URL para corresponder a cada página.

Por exemplo, crie um SecondScreen.js arquivo dentro do aplicativo diretório e exporte um componente padrão:

importar { Folha de Estilo, Texto, Visualização } de"react-native";
importar Reagir de"reagir";
const Segunda Tela = () => {
retornar (


Segunda Tela</Text>
 </View>
 </View>
 );
};
exportarpadrão Segunda Tela;
const estilos = StyleSheet.create({});

Você pode navegar para esta tela de index.js com o useRouter() método:

importar { useRouter } de"expo-router";
exportarpadrãofunçãoPágina() {
const navegação = useRouter();
retornar (

Olá mundo</Text>
Esta é a primeira página de seu aplicativo.</Text>
 titulo="Navegar para SecondScreen"
 onPress={() => {
 navegação.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Aqui você atribui o roteador à navegação e o utiliza dentro do elemento Button chamando navegação.push("/segundo"). O argumento em push é o caminho do arquivo da tela para a qual você deseja navegar.

Dentro Segunda Tela você também pode navegar para a tela de índice assim:

importar { Link } de"expo-router";
const Segunda Tela = () => {
retornar (


Segunda Tela</Text>
"/" comoCriança>

Navegue até index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

O elemento link usa uma propriedade href para especificar o caminho. Dentro do aplicativo, o "/" path corresponde ao arquivo de entrada (index.js). O segundo suporte é asChild. Este prop permite que você renderize um primeiro componente filho com todos os props especificados em vez do componente Link padrão. Você pode usar isso para personalizar a aparência do componente Link ou para implementar a lógica de roteamento personalizada.

Definindo Rotas Dinâmicas

Com rotas dinâmicas, você pode gerar rotas dinamicamente com base em determinados parâmetros ou dados. Em vez de definir um conjunto fixo de rotas, você ganha flexibilidade e adaptabilidade na navegação do seu aplicativo.

Para começar a usar rotas dinâmicas no Expo Router, você precisa definir as rotas para lidar com o conteúdo dinâmico. Você pode usar rotas parametrizadas especificando espaços reservados no caminho da rota. Os valores para esses espaços reservados estarão disponíveis para sua rota quando alguém navegar até ela.

Por exemplo, considere um aplicativo de blog no qual você deseja exibir postagens de blog individuais. Você pode definir uma rota dinâmica para lidar com cada uma das postagens do blog:

// app/routes/BlogPost.js
importar Reagir de"reagir";
importar { useRouter } de"expo-router";
const Postagem do blog = ({ rota }) => {
const { postId } = rota.params;
retornar (

Exibindo postagem no blog com ID: {postId}</Text>
 </View>
 );
};
exportarpadrão Postagem no blog;

Neste exemplo, você define um componente de rota dinâmica chamado Postagem no blog. O rota.params O objeto permite acessar os valores dos parâmetros passados ​​para a rota. Neste caso, você está acessando um postId parâmetro para exibir a postagem de blog correspondente.

Gerando Rotas Dinâmicas

Agora que você tem uma rota dinâmica definida, pode gerar rotas dinamicamente com base nos dados ou na entrada do usuário. Por exemplo, se você tiver uma lista de postagens de blog obtidas de uma API, poderá gerar rotas dinamicamente para cada postagem de blog.

Aqui está um exemplo:

// app/components/BlogList.js
importar Reagir de"reagir";
importar { useNavigation } de"expo-router";
const Lista de blogs = ({ postagens no blog }) => {
const navegação = useNavigation();
const navegaToBlogPost = (postId) => {
 navegação.navigate("BlogPost", {postId});
 };
retornar (

 {blogPosts.map((publicar) => (
 chave={post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportarpadrão Lista de Blogs;

Neste exemplo, você itera sobre o postagens no blog array e renderizar um componente para cada post. Quando você pressiona um post, o navegueToBlogPost função é executada, passando o postId à rota de navegação.

Manipulando Rotas Dinâmicas

Você pode ouvir eventos de navegação específicos para uma rota dinâmica usando o useFocusEffect gancho.

Por exemplo:

// app/routes/BlogPost.js
importar Reagir de"reagir";
importar { Rota, useFocusEffect } de"expo-router";
const Postagem do blog = ({ rota }) => {
const { postId } = rota.params;
 useFocusEffect(() => {
// Busca dados de postagem de blog com base em postId
// Execute quaisquer outras ações necessárias em foco
 });
retornar (

Exibindo postagem no blog com ID: {postId}</Text>
 </View>
 );
};
exportarpadrão Postagem no blog;

Neste exemplo, o useFocusEffect gancho escuta eventos de foco específicos para o Postagem no blog componente. Dentro do retorno de chamada, você pode buscar dados adicionais, executar ações ou atualizar a tela com base na postagem do blog em foco.

Navegando com Rotas Dinâmicas

Para navegar para uma rota dinâmica, você pode usar os métodos de navegação fornecidos pelo Expo Router.

Por exemplo, para navegar até o Postagem no blog componente com um determinado postId, você pode usar o navegação.navigate método:

// app/components/BlogList.js
importar Reagir de"reagir";
importar { useNavigation } de"expo-router";
const Lista de blogs = ({ postagens no blog }) => {
const navegação = useNavigation();
const navegaToBlogPost = (postId) => {
 navegação.navigate("BlogPost", {postId});
 };
retornar (

 {blogPosts.map((publicar) => (
 chave={post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportarpadrão Lista de Blogs;

Quando você pressiona uma postagem de blog, o navegueToBlogPost função será disparada com o postId.

O Expo Router ajuda você a estruturar seus aplicativos nativos

O Expo Router oferece uma excelente solução para gerenciar a navegação em seus aplicativos React Native. Ao reimaginar a experiência de roteamento nativo, o Expo Router oferece flexibilidade e facilidade de uso.

Você explorou os recursos do Expo Router, mergulhou nos conceitos básicos de roteamento e descobriu como construir rotas dinâmicas. Com o Expo Router, você pode criar fluxos de navegação dinâmicos, manipular dados variados ou entrada do usuário e personalizar a navegação em seu aplicativo.