Rutarea nativă reimaginată cu Expo Router

Rutarea bazată pe fișiere este o tehnică comună de dezvoltare web care mapează o cale URL către un anumit fișier dintr-un director de proiect. Acest sistem evită configurațiile complexe de rutare implicate în construirea sistemelor de navigație.

Odată cu lansarea bibliotecii Expo Router, rutarea bazată pe fișiere este posibilă cu aplicațiile React Native. Expo Router ar putea fi un sistem de navigare mai bun pentru dezvoltatorii React Native care lucrează cu Expo.

Navigație reimaginată cu Expo Router

Routerul expo oferă o soluție de rutare declarativă pentru aplicațiile React Native Expo. Acest sistem este considerabil diferit de modul în care ați face-o construiți un sistem de navigație folosind React Navigation. Expo Router ridică probleme majore legate de utilizarea sistemului de navigație actual.

Aceste probleme includ un sistem de navigare care nu funcționează constant peste tot, dificultăți în gestionarea legăturilor profunde și, de asemenea, setări complexe pentru tranzițiile de navigare personalizate.

Navigarea/rutarea bazată pe fișiere expo router este un sistem simplu care funcționează bine și este deja familiar printre dezvoltatorii JavaScript și cadrele JavaScript precum Next.js, unde puteți defini rute.

Instalarea și configurarea Routerului Expo

Este destul de simplu să migrați proiectul Expo de la vechiul sistem de navigație la utilizarea routerului Expo.

Pasul 1: Instalați routerul Expo

Utilizați această comandă de terminal pentru a rula programul de instalare expo-router:

npx expo instalează expo-router

De asemenea, va trebui să vă asigurați că ați instalat aceste dependențe peer:

• reacţionează-nativ-zonă-sigură-context
• react-native-ecranele
• expo-linking
• bara de stare expo
• reacționează-native-gesture-handler

Dacă lipsesc unele, le puteți instala rulând:

instalarea npx expo 

Pasul 2: Actualizați punctul de intrare

Creaza un nou index.js fișier pentru a vă înlocui existentul App.js punctul de intrare și setați index.js ca punct de intrare al aplicației în interior app.json:

// Setați index.js ca punct de intrare
{
"principal": „index.js”
}
// Importă următoarele în interiorul index.js
import"expo-router/intrare";

Expo Router utilizează a legătură profundă schema pentru a determina ce ecran sau conținut să se deschidă la rutare.

Definiți o schemă de legături profunde pentru aplicația dvs. adăugând un sistem proprietate la app.json:

{
"expoziție": {
"sistem": „aplicația mea”
 }
}

Pasul 4: Configurare finală

Ultimul pas este să configurați pachetul de metrou al aplicației dvs. Expo și să configurați Babel să accepte Expo Router în aplicația dvs.

Interior babel.config.js modificați codul existent pentru a arăta astfel:

modul.exporturi = funcţie (api) {
 api.cache(Adevărat);
întoarcere {
 presetari: ["babel-preset-expo"],
 pluginuri: [
cere.rezolva("expo-router/babel"),
/* */
 ],
 };
};

Acum reconstruiți și porniți aplicația rulând:

npx expo --clear

Creați rutele aplicației dvs. cu Expo Router

Puteți începe să configurați un flux de navigare în interiorul aplicația pliant. The index.js fișierul este punctul de plecare. Expo Router adaugă calea fiecărui fișier pe care îl creați în interior aplicația către sistemul de rute al aplicației cu link-uri profunde URL pentru a se potrivi cu fiecare pagină.

De exemplu, creați un SecondScreen.js dosar în interiorul aplicația director și exportați o componentă implicită:

import { StyleSheet, Text, View } din"react-nativ";
import Reacţiona din"reacţiona";
const SecondScreen = () => {
întoarcere (


Al doilea ecran</Text>
 </View>
 </View>
 );
};
exportMod implicit SecondScreen;
const stiluri = StyleSheet.create({});

Puteți naviga la acest ecran din index.js cu useRouter() metodă:

import { useRouter } din"expo-router";
exportMod implicitfuncţiePagină() {
const navigare = useRouter();
întoarcere (

Bună lume</Text>
Aceasta este prima pagină de aplicația ta.</Text>
 titlu=„Navigați la SecondScreen”
 onPress={() => {
 navigare.push(„/SecondScreen”);
 }}
 />
 </View>
 );
}

Aici atribuiți routerul navigației și îl utilizați în interiorul elementului Button prin apelare navigation.push("/secunda"). Argumentul din push este calea fișierului a ecranului la care doriți să navigați.

Interior Al doilea ecran De asemenea, puteți naviga la ecranul index astfel:

import { Link } din"expo-router";
const SecondScreen = () => {
întoarcere (


Al doilea ecran</Text>
"/" ca Copil>

Navigați la index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Elementul link are o propă href pentru a specifica calea. În interiorul aplicației, "/" calea corespunde fișierului de intrare (index.js). A doua recuzită este asChild. Această reclamă vă permite să randați o primă componentă copil cu toate elementele de recuzită specificate în loc de componenta implicită Link. Puteți utiliza acest lucru pentru a personaliza aspectul componentei Link sau pentru a implementa logica de rutare personalizată.

Definirea rutelor dinamice

Cu Rute dinamice, puteți genera rute dinamic pe baza anumitor parametri sau date. În loc să definiți un set fix de rute, obțineți flexibilitate și adaptabilitate în navigarea aplicației dvs.

Pentru a începe să utilizați rute dinamice în Expo Router, trebuie să definiți rutele pentru a gestiona conținutul dinamic. Puteți utiliza rute parametrizate specificând substituenți în calea rutei. Valorile acestor substituenți vor fi apoi disponibile pentru traseu atunci când cineva navighează la acesta.

De exemplu, luați în considerare o aplicație de blog în care doriți să afișați postări individuale de blog. Puteți defini o rută dinamică pentru a gestiona fiecare dintre postările de blog:

// app/routes/BlogPost.js
import Reacţiona din"reacţiona";
import { useRouter } din"expo-router";
const BlogPost = ({ traseu }) => {
const { postId } = route.params;
întoarcere (

Se afișează postarea de blog cu ID: {postId}</Text>
 </View>
 );
};
exportMod implicit Postare pe blog;

În acest exemplu, definiți o componentă de rută dinamică numită Postare pe blog. The traseu.params obiect vă permite să accesați valorile parametrilor transmise rutei. În acest caz, accesați un postId parametru pentru a afișa postarea de blog corespunzătoare.

Generarea de rute dinamice

Acum că aveți o rută dinamică definită, puteți genera rute dinamic pe baza datelor sau a intrărilor utilizatorului. De exemplu, dacă aveți o listă de postări de blog preluate dintr-un API, puteți genera dinamic rute pentru fiecare postare de blog.

Iată un exemplu:

// app/components/BlogList.js
import Reacţiona din"reacţiona";
import { useNavigation } din"expo-router";
const BlogList = ({ blogPosts }) => {
const navigare = useNavigation();
const navigateToBlogPost = (postId) => {
 navigation.navigate("Postare pe blog", { postId });
 };
întoarcere (

 {blogPosts.map((post) => (
 cheie={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportMod implicit BlogList;

În acest exemplu, repeți peste postări pe blog matrice și randare a componentă pentru fiecare post. Când apăsați pe o postare, navigateToBlogPost funcția rulează, trecând postId la ruta de navigare.

Gestionarea rutelor dinamice

Puteți asculta evenimente de navigare specifice unei rute dinamice folosind funcția foloseșteFocusEffect cârlig.

De exemplu:

// app/routes/BlogPost.js
import Reacţiona din"reacţiona";
import { Route, useFocusEffect } din"expo-router";
const BlogPost = ({ traseu }) => {
const { postId } = route.params;
 useFocusEffect(() => {
// Preluați datele postărilor de blog pe baza postId
// Efectuați orice alte acțiuni necesare pentru focalizare
 });
întoarcere (

Se afișează postarea de blog cu ID: {postId}</Text>
 </View>
 );
};
exportMod implicit Postare pe blog;

În acest exemplu, foloseșteFocusEffect hook ascultă pentru evenimente focus specifice Postare pe blog componentă. În interiorul apelului invers, puteți obține date suplimentare, puteți efectua acțiuni sau actualiza ecranul pe baza postării de blog concentrate.

Navigarea cu rute dinamice

Pentru a naviga către o rută dinamică, puteți utiliza metodele de navigare oferite de Expo Router.

De exemplu, pentru a naviga la Postare pe blog componentă cu un specific postId, puteți folosi navigare.navigare metodă:

// app/components/BlogList.js
import Reacţiona din"reacţiona";
import { useNavigation } din"expo-router";
const BlogList = ({ blogPosts }) => {
const navigare = useNavigation();
const navigateToBlogPost = (postId) => {
 navigation.navigate("Postare pe blog", { postId });
 };
întoarcere (

 {blogPosts.map((post) => (
 cheie={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportMod implicit BlogList;

Când apăsați pe o postare pe blog, navigateToBlogPost funcția se va declanșa cu postId.

Expo Router vă ajută să vă structurați aplicațiile native

Routerul Expo oferă o soluție excelentă pentru gestionarea navigației în aplicațiile dvs. React Native. Prin reimaginarea experienței native de rutare, Expo Router oferă flexibilitate și ușurință în utilizare.

Ați explorat caracteristicile Expo Router, ați aprofundat conceptele de bază de rutare și ați descoperit cum să construiți rute dinamice. Cu Expo Router, puteți crea fluxuri de navigare dinamice, puteți gestiona diferite date sau intrări ale utilizatorului și puteți personaliza navigarea în aplicația dvs.