Očistite svoje URL rute, čak i na mobilnim aplikacijama, pomoću biblioteke Expo Router.

Usmjeravanje temeljeno na datotekama uobičajena je tehnika web-razvoja koja preslikava URL put do određene datoteke u direktoriju projekta. Ovaj sustav izbjegava složene konfiguracije ruta povezane s izgradnjom navigacijskih sustava.

S izdavanjem biblioteke Expo Router, usmjeravanje temeljeno na datotekama moguće je s React Native aplikacijama. Expo Router bi mogao biti bolji navigacijski sustav za React Native programere koji rade s Expom.

Nova navigacija uz Expo Router

Expo router pruža deklarativno rješenje za usmjeravanje za React Native Expo aplikacije. Ovaj sustav je znatno drugačiji od onoga kako biste vi izgraditi navigacijski sustav koristeći React Navigation. Expo Router oslobađa velike brige u vezi s korištenjem trenutnog navigacijskog sustava.

Ti problemi uključuju postojanje navigacijskog sustava koji ne radi dosljedno posvuda, poteškoće u upravljanju dubinskim povezivanjem i također složene postavke za prilagođene prijelaze navigacije.

instagram viewer

Expo router navigacija/usmjeravanje temeljena na datotekama jednostavan je sustav koji dobro radi i već je poznat među JavaScript programerima i JavaScript okvirima kao što su Next.js, gdje možete definirati rute.

Instalacija i postavljanje Expo Routera

Prilično je jednostavno migrirati vaš Expo projekt sa starog navigacijskog sustava na korištenje Expo rutera.

Korak 1: Instalirajte Expo Router

Upotrijebite ovu terminalsku naredbu za pokretanje instalacijskog programa expo-router:

npx expo instalirajte expo-usmjerivač

Također ćete morati osigurati da ste instalirali ove peer ovisnosti:

  • reagirati-native-safe-area-context
  • react-native-screens
  • ekspo-povezivanje
  • traka statusa izložbe
  • obrađivač geste-reagiranja

Ako neki nedostaju, možete ih instalirati pokretanjem:

npx expo instalacija

Korak 2: Ažurirajte ulaznu točku

Stvorite novi index.js datoteku za zamjenu vaše postojeće App.js ulaznu točku i postavite index.js kao ulaznu točku aplikacije unutra app.json:

// Postavi index.js kao ulaznu točku
{
"glavni": "index.js"
}
// Uvezite sljedeće unutar index.js
uvoz"expo-router/entry";

Expo Router koristi a duboka veza shema za određivanje zaslona ili sadržaja koji će se otvoriti prilikom usmjeravanja.

Definirajte shemu dubinskog povezivanja za svoju aplikaciju dodavanjem shema vlasništvo na app.json:

{
"expo": {
"shema": "moja aplikacija"
 }
}

Korak 4: Konačna konfiguracija

Posljednji korak je postavljanje metro skupljača vaše aplikacije Expo i konfiguracija Babela za podršku Expo Routera u vašoj aplikaciji.

Iznutra babel.config.js izmijenite postojeći kod da izgleda ovako:

modul.izvoz = funkcija (api) {
 api.cache(pravi);
povratak {
 unaprijed postavljene postavke: ["babel-preset-expo"],
 dodaci: [
zahtijevati.odlučnost("expo-router/babel"),
/* */
 ],
 };
};

Sada ponovno izgradite i pokrenite svoju aplikaciju pokretanjem:

npx expo --jasno
2 Slike

Izrada ruta vaše aplikacije s Expo Routerom

Možete početi postavljati tijek navigacije unutar aplikacija mapa. The index.js datoteka je vaša početna točka. Expo Router dodaje putanju svake datoteke koju stvorite unutra aplikacija na sustav usmjeravanja aplikacije s URL dubinskim vezama koje odgovaraju svakoj stranici.

Na primjer, stvorite a SecondScreen.js datoteka unutar aplikacija direktorij i izvezite zadanu komponentu:

uvoz {Stilski list, tekst, prikaz} iz"react-native";
uvoz Reagirati iz"reagirati";
konst Drugi zaslon = () => {
povratak (


Drugi zaslon</Text>
 </View>
 </View>
 );
};


izvozzadano SecondScreen;
konst stilovi = StyleSheet.create({});

Na ovaj zaslon možete ići iz index.js s useRouter() metoda:

uvoz {useRouter} iz"expo-router";
izvozzadanofunkcijaStranica() {
konst navigacija = useRouter();


povratak (

Zdravo svijete</Text>
Ovo je prva stranica od vaša aplikacija.</Text>
 naslov="Idi na SecondScreen"
 onPress={() => {
 navigacija.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Ovdje usmjerivaču dodijelite navigaciju i koristite ga unutar elementa Button pozivom navigation.push("/sekunda"). Argument unutar push-a je put do datoteke ekrana do kojeg želite prijeći.

Iznutra SecondScreen također možete navigirati do indeksnog zaslona ovako:

uvoz { Veza } iz"expo-router";
konst Drugi zaslon = () => {
povratak (


Drugi zaslon</Text>
"/" kao Dijete>

Idite na index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Element veze uzima href prop kako bi odredio stazu. Unutar aplikacije, "/" staza odgovara ulaznoj datoteci (index.js). Drugi rekvizit je asChild. Ovaj prop omogućuje vam da renderirate prvu podređenu komponentu sa svim navedenim rekvizitima umjesto zadane komponente Link. Ovo možete koristiti za prilagodbu izgleda komponente Link ili za implementaciju prilagođene logike usmjeravanja.

Definiranje dinamičkih ruta

S dinamičkim rutama možete dinamički generirati rute na temelju određenih parametara ili podataka. Umjesto definiranja fiksnog skupa ruta, dobivate fleksibilnost i prilagodljivost u navigaciji svoje aplikacije.

Da biste počeli koristiti dinamičke rute u Expo Routeru, trebate definirati rute za rukovanje dinamičkim sadržajem. Parametrizirane rute možete koristiti navođenjem rezerviranih mjesta unutar putanje rute. Vrijednosti za ova rezervirana mjesta tada će biti dostupne vašoj ruti kada netko navigira do nje.

Na primjer, razmislite o aplikaciji za bloganje u kojoj želite prikazati pojedinačne postove na blogu. Možete definirati dinamičku rutu za obradu svakog od postova na blogu:

// app/routes/BlogPost.js
uvoz Reagirati iz"reagirati";
uvoz {useRouter} iz"expo-router";
konst BlogPost = ({ ruta }) => {
konst { postId } = route.params;


povratak (

Prikaz objave na blogu s ID: {postId}</Text>
 </View>
 );
};
izvozzadano BlogPost;

U ovom primjeru definirate dinamičku komponentu rute pod nazivom BlogPost. The ruta.params objekt vam omogućuje pristup vrijednostima parametara proslijeđenim ruti. U ovom slučaju pristupate a postId parametar za prikaz odgovarajuće objave na blogu.

Generiranje dinamičkih ruta

Sada kada imate definiranu dinamičku rutu, možete dinamički generirati rute na temelju podataka ili korisničkog unosa. Na primjer, ako imate popis postova na blogu dohvaćen iz API-ja, možete dinamički generirati rute za svaki post na blogu.

Evo primjera:

// app/components/BlogList.js
uvoz Reagirati iz"reagirati";
uvoz {useNavigation} iz"expo-router";
konst BlogList = ({ blogPosts }) => {
konst navigacija = useNavigation();


konst navigateToBlogPost = (postId) => {
 navigacija.navigate("BlogPost", { ID objave });
 };


povratak (

 {blogPosts.map((objaviti) => (
 ključ={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
izvozzadano BlogList;

U ovom primjeru ponavljate preko blogPosts niz i prikaz a komponenta za svaki post. Kada pritisnete objavu, navigateToBlogPost funkcija radi, prolazeći postId do navigacijske rute.

Rukovanje dinamičkim rutama

Možete slušati navigacijske događaje specifične za dinamičnu rutu pomoću useFocusEffect kuka.

Na primjer:

// app/routes/BlogPost.js
uvoz Reagirati iz"reagirati";
uvoz { Ruta, useFocusEffect } iz"expo-router";
konst BlogPost = ({ ruta }) => {
konst { postId } = route.params;


 useFocusEffect(() => {
// Dohvati podatke o postu na blogu na temelju ID-a posta
// Izvedite sve druge potrebne radnje u fokusu
 });


povratak (

Prikaz objave na blogu s ID: {postId}</Text>
 </View>
 );
};
izvozzadano BlogPost;

U ovom primjeru, useFocusEffect kuka sluša događaje fokusa specifične za BlogPost komponenta. Unutar povratnog poziva možete dohvatiti dodatne podatke, izvršiti radnje ili ažurirati zaslon na temelju fokusiranog posta na blogu.

Navigacija s dinamičkim rutama

Za navigaciju do dinamičke rute možete koristiti metode navigacije koje nudi Expo Router.

Na primjer, za navigaciju do BlogPost komponenta sa specifičnim postId, možete koristiti navigacija.navigirati metoda:

// app/components/BlogList.js
uvoz Reagirati iz"reagirati";
uvoz {useNavigation} iz"expo-router";
konst BlogList = ({ blogPosts }) => {
konst navigacija = useNavigation();


konst navigateToBlogPost = (postId) => {
 navigacija.navigate("BlogPost", { ID objave });
 };


povratak (

 {blogPosts.map((objaviti) => (
 ključ={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
izvozzadano BlogList;

Kada pritisnete post na blogu, navigateToBlogPost funkcija će se pokrenuti s postId.

Expo Router pomaže vam da strukturirate svoje izvorne aplikacije

Expo Router pruža izvrsno rješenje za upravljanje navigacijom u vašim React Native aplikacijama. Ponovno zamišljajući izvorno iskustvo usmjeravanja, Expo Router nudi fleksibilnost i jednostavnost korištenja.

Istražili ste značajke Expo Routera, zadubili se u osnovne koncepte rutiranja i otkrili kako izgraditi dinamičke rute. S Expo Routerom možete stvoriti dinamičke tokove navigacije, rukovati različitim podacima ili korisničkim unosom i personalizirati navigaciju u svojoj aplikaciji.