Routing nativo reinventato con Expo Router

Il routing basato su file è una tecnica di sviluppo Web comune che associa un percorso URL a un file specifico in una directory di progetto. Questo sistema evita le complesse configurazioni di percorso coinvolte nella costruzione di sistemi di navigazione.

Con il rilascio della libreria Expo Router, il routing basato su file è possibile con le applicazioni React Native. Expo Router potrebbe essere un sistema di navigazione migliore per gli sviluppatori React Native che lavorano con Expo.

Navigazione reinventata con Expo Router

Il router expo fornisce una soluzione di routing dichiarativo per le app React Native Expo. Questo sistema è notevolmente diverso da come lo faresti tu costruire un sistema di navigazione usando React Navigation. Expo Router Cubs risolve le principali preoccupazioni relative all'utilizzo dell'attuale sistema di navigazione funzionante.

Questi problemi includono avere un sistema di navigazione che non funziona in modo coerente ovunque, difficoltà nella gestione dei collegamenti profondi e anche configurazioni complesse per le transizioni di navigazione personalizzate.

La navigazione/instradamento basata su file del router expo è un sistema semplice che funziona bene ed è già familiare agli sviluppatori JavaScript e ai framework JavaScript come Next.js, dove puoi definire i percorsi.

Installazione e configurazione di Expo Router

È abbastanza semplice migrare il tuo progetto Expo dal vecchio sistema di navigazione all'utilizzo del router Expo.

Passaggio 1: installare Expo Router

Usa questo comando da terminale per eseguire il programma di installazione di expo-router:

npx expo installa expo-router

Dovrai anche assicurarti di aver installato queste dipendenze peer:

• react-native-safe-area-context
• reagire-schermi-nativi
• expo-collegamento
• expo-barra di stato
• gestore-gesture-nativo-di-reazione

Se ne mancano alcuni, puoi installarli eseguendo:

installazione di npx expo 

Passaggio 2: aggiornare il punto di ingresso

Crea un nuovo index.js file per sostituire il file esistente App.js punto di ingresso e impostare il index.js come punto di ingresso dell'app all'interno app.json:

// Imposta index.js come punto di ingresso
{
"principale": "indice.js"
}
// Importa quanto segue all'interno di index.js
importare"expo-router/entrata";

Expo Router utilizza un legame profondo schema per determinare quale schermata o contenuto aprire durante il routing.

Definisci uno schema di deep linking per la tua app aggiungendo a schema proprietà a app.json:

{
"expo": {
"schema": "miaapp"
 }
}

Passaggio 4: configurazione finale

L'ultimo passo è impostare il metro bundler della tua app Expo e configurare Babel per supportare Expo Router nella tua app.

Dentro babel.config.js modificare il codice esistente in modo che assomigli a questo:

modulo.esporta = funzione (API) {
 api.cache(VERO);
ritorno {
 preimpostazioni: ["babel-preset-expo"],
 plugin: [
richiedere.risolvere("expo-router/babel"),
/* */
 ],
 };
};

Ora ricostruisci e avvia la tua app eseguendo:

npx expo --clear

Costruisci i percorsi della tua app con Expo Router

Puoi iniziare a impostare un flusso di navigazione all'interno del file app cartella. IL index.js file è il punto di partenza. Expo Router aggiunge il percorso di ogni file che crei all'interno app al sistema di instradamento dell'app con collegamenti diretti URL corrispondenti a ciascuna pagina.

Ad esempio, crea un file SecondScreen.js file all'interno del file app directory ed esportare un componente predefinito:

importare { Foglio di stile, Testo, Visualizza } da"nativo di reazione";
importare Reagire da"reagire";
cost Secondo schermo = () => {
ritorno (


Secondo schermo</Text>
 </View>
 </View>
 );
};
esportarepredefinito Secondo schermo;
cost styles = StyleSheet.create({});

È possibile accedere a questa schermata da index.js con il usaRouter() metodo:

importare {usaRouter} da"expo-router";
esportarepredefinitofunzionePagina() {
cost navigazione = useRouter();
ritorno (

Ciao Mondo</Text>
Questa è la prima pagina Di la tua app.</Text>
 titolo="Vai a SecondScreen"
 suPremere={() => {
 navigazione.push("/Seconda schermata");
 }}
 />
 </View>
 );
}

Qui si assegna il router alla navigazione e lo si utilizza all'interno dell'elemento Button chiamando navigazione.push("/secondo"). L'argomento all'interno di push è il percorso del file della schermata in cui desideri navigare.

Dentro SecondoSchermo puoi anche navigare nella schermata dell'indice in questo modo:

importare { Collegamento } da"expo-router";
cost Secondo schermo = () => {
ritorno (


Secondo schermo</Text>
"/" comeBambino>

Passare a index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

L'elemento link accetta un href prop per specificare il percorso. All'interno dell'app, il "/" path corrisponde al file di immissione (index.js). Il secondo oggetto di scena è asChild. Questo oggetto di scena ti consente di eseguire il rendering di un primo componente figlio con tutti gli oggetti di scena specificati invece del componente Link predefinito. Puoi usarlo per personalizzare l'aspetto del componente Link o per implementare una logica di routing personalizzata.

Definizione di percorsi dinamici

Con i percorsi dinamici, puoi generare percorsi in modo dinamico in base a determinati parametri o dati. Invece di definire un insieme fisso di percorsi, ottieni flessibilità e adattabilità nella navigazione della tua app.

Per iniziare a utilizzare i percorsi dinamici in Expo Router, è necessario definire i percorsi per gestire il contenuto dinamico. È possibile utilizzare percorsi con parametri specificando i segnaposto all'interno del percorso del percorso. I valori per questi segnaposto saranno quindi disponibili per il tuo percorso quando qualcuno lo raggiunge.

Ad esempio, considera un'app di blog in cui desideri visualizzare i singoli post del blog. Puoi definire un percorso dinamico per gestire ciascuno dei post del blog:

// app/routes/BlogPost.js
importare Reagire da"reagire";
importare {usaRouter} da"expo-router";
cost PostBlog = ({ itinerario }) => {
cost {postId} = route.params;
ritorno (

Visualizzazione del post del blog con ID: {postId}</Text>
 </View>
 );
};
esportarepredefinito Post sul blog;

In questo esempio, definisci un componente di instradamento dinamico denominato Post sul blog. IL route.params object consente di accedere ai valori dei parametri passati alla route. In questo caso, stai accedendo a un file postId parametro per visualizzare il post del blog corrispondente.

Generazione di percorsi dinamici

Ora che hai definito un percorso dinamico, puoi generare percorsi in modo dinamico in base ai dati o all'input dell'utente. Ad esempio, se disponi di un elenco di post del blog recuperati da un'API, puoi generare dinamicamente percorsi per ogni post del blog.

Ecco un esempio:

// app/components/BlogList.js
importare Reagire da"reagire";
importare { usoNavigazione } da"expo-router";
cost ElencoBlog = ({ i post del blog }) => {
cost navigazione = useNavigation();
cost navigateToBlogPost = (postId) => {
 navigazione.navigare("Post sul blog", {idpost});
 };
ritorno (

 {blogPosts.mappa((inviare) => (
 chiave={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
esportarepredefinito Elenco blog;

In questo esempio, si esegue l'iterazione sul i post del blog matrice e renderizzare a componente per ogni post. Quando premi un post, il navigateToBlogPost la funzione viene eseguita, passando il postId al percorso di navigazione.

Gestione di percorsi dinamici

È possibile ascoltare gli eventi di navigazione specifici di un percorso dinamico utilizzando il usaFocusEffect gancio.

Per esempio:

// app/routes/BlogPost.js
importare Reagire da"reagire";
importare { Percorso, usaFocusEffect } da"expo-router";
cost PostBlog = ({ itinerario }) => {
cost {postId} = route.params;
 usaFocusEffect(() => {
// Recupera i dati dei post del blog in base a postId
// Esegui tutte le altre azioni necessarie sul focus
 });
ritorno (

Visualizzazione del post del blog con ID: {postId}</Text>
 </View>
 );
};
esportarepredefinito Post sul blog;

In questo esempio, il usaFocusEffect hook rimane in ascolto per gli eventi focus specifici di Post sul blog componente. All'interno della richiamata, puoi recuperare dati aggiuntivi, eseguire azioni o aggiornare lo schermo in base al post del blog focalizzato.

Navigazione con percorsi dinamici

Per navigare verso un percorso dinamico, puoi utilizzare i metodi di navigazione forniti da Expo Router.

Ad esempio, per navigare nel file Post sul blog componente con uno specifico postId, puoi usare il navigazione.navigare metodo:

// app/components/BlogList.js
importare Reagire da"reagire";
importare { usoNavigazione } da"expo-router";
cost ElencoBlog = ({ i post del blog }) => {
cost navigazione = useNavigation();
cost navigateToBlogPost = (postId) => {
 navigazione.navigare("Post sul blog", {idpost});
 };
ritorno (

 {blogPosts.mappa((inviare) => (
 chiave={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
esportarepredefinito Elenco blog;

Quando premi un post sul blog, il navigateToBlogPost la funzione si attiverà con il postId.

Expo Router ti aiuta a strutturare le tue app native

Expo Router offre un'ottima soluzione per gestire la navigazione nelle tue app React Native. Reimmaginando l'esperienza di routing nativa, Expo Router offre flessibilità e facilità d'uso.

Hai esplorato le funzionalità di Expo Router, approfondito i concetti di routing di base e scoperto come costruire percorsi dinamici. Con Expo Router, puoi creare flussi di navigazione dinamici, gestire dati variabili o input dell'utente e personalizzare la navigazione nella tua app.