Počistite svoje URL poti, tudi v mobilnih aplikacijah, z uporabo knjižnice Expo Router.

Usmerjanje na podlagi datotek je običajna tehnika spletnega razvoja, ki preslika pot URL do določene datoteke v imeniku projekta. Ta sistem se izogiba zapletenim konfiguracijam usmerjanja, ki so povezane z gradnjo navigacijskih sistemov.

Z izdajo knjižnice Expo Router je usmerjanje na podlagi datotek možno z aplikacijami React Native. Expo Router bi lahko bil boljši navigacijski sistem za razvijalce React Native, ki delajo z Expo.

Navigacija, prenovljena z usmerjevalnikom Expo

Usmerjevalnik Expo ponuja deklarativno rešitev usmerjanja za aplikacije React Native Expo. Ta sistem je precej drugačen od tistega, ki bi ga vi imeli zgradite navigacijski sistem z uporabo React Navigation. Expo Router ima velike pomisleke glede uporabe trenutno delujočega navigacijskega sistema.

Te težave vključujejo navigacijski sistem, ki ne deluje dosledno povsod, težave pri upravljanju globokih povezav in tudi zapletene nastavitve za prehode navigacije po meri.

instagram viewer

Navigacija/usmerjanje na podlagi datoteke usmerjevalnika Expo je preprost sistem, ki deluje dobro in je že poznan med razvijalci JavaScripta in okviri JavaScript, kot je Next.js, kjer lahko definirate poti.

Namestitev in nastavitev usmerjevalnika Expo

Svoj projekt Expo je dokaj preprosto preseliti s starega navigacijskega sistema na uporabo usmerjevalnika Expo.

1. korak: Namestite usmerjevalnik Expo

Uporabite ta terminalski ukaz za zagon namestitvenega programa expo-router:

npx expo namestite expo-usmerjevalnik

Zagotoviti boste morali tudi, da ste namestili te odvisnosti enakovrednih:

  • react-native-safe-area-context
  • react-native-screens
  • razstavna povezava
  • vrstica stanja razstave
  • react-native-gesture-handler

Če kateri manjka, jih lahko namestite tako, da zaženete:

namestitev npx expo

2. korak: Posodobite vstopno točko

Ustvari novo index.js datoteko za zamenjavo obstoječe App.js vstopno točko in nastavite index.js kot vstopno točko aplikacije v notranjost app.json:

// Nastavi index.js kot vstopno točko
{
"glavni": "index.js"
}
// Uvozi naslednje znotraj index.js
uvoz"expo-router/vhod";

Expo Router uporablja a globoka povezava shema za določanje, kateri zaslon ali vsebino odpreti pri usmerjanju.

Določite shemo globokega povezovanja za svojo aplikacijo tako, da dodate a shema premoženje do app.json:

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

4. korak: Končna konfiguracija

Zadnji korak je nastavitev metro združevalnika vaše aplikacije Expo in konfiguracija Babela za podporo Expo Router v vaši aplikaciji.

V notranjosti babel.config.js spremenite obstoječo kodo, da bo videti takole:

modul.izvozi = funkcijo (api) {
 api.cache(prav);
vrnitev {
 prednastavitve: ["babel-preset-expo"],
 vtičniki: [
zahtevati.razreši("expo-router/babel"),
/* */
 ],
 };
};

Zdaj znova zgradite in zaženite aplikacijo tako, da zaženete:

npx expo --clear
2 Slike

Izdelava poti vaše aplikacije z Expo Routerjem

Lahko začnete nastavljati potek navigacije znotraj aplikacija mapo. The index.js datoteka je vaše izhodišče. Expo Router doda pot do vsake datoteke, ki jo ustvarite znotraj aplikacija v sistem usmerjanja aplikacije z URL-ji v globino, ki se ujemajo z vsako stranjo.

Ustvarite na primer a SecondScreen.js datoteka znotraj aplikacija imenik in izvozite privzeto komponento:

uvoz {Slogovna tabela, besedilo, pogled} od"react-native";
uvoz Reagiraj od"reagirati";
konst Drugi zaslon = () => {
vrnitev (


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


izvozprivzeto SecondScreen;
konst styles = StyleSheet.create({});

Na ta zaslon se lahko pomaknete iz index.js z useRouter() metoda:

uvoz {useRouter} od"expo-router";
izvozprivzetofunkcijoStran() {
konst navigacija = useRouter();


vrnitev (

Pozdravljen svet</Text>
To je prva stran od vaša aplikacija.</Text>
 naslov="Pomakni se na SecondScreen"
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Tukaj usmerjevalniku dodelite navigacijo in ga s klicem uporabite znotraj elementa Button navigation.push("/sekunda"). Argument znotraj push je pot datoteke do zaslona, ​​do katerega se želite pomakniti.

V notranjosti SecondScreen do indeksnega zaslona se lahko pomaknete tudi takole:

uvoz { Povezava } od"expo-router";
konst Drugi zaslon = () => {
vrnitev (


Drugi zaslon</Text>
"/" kot Otrok>

Pomaknite se do index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Element povezave za določanje poti uporablja href prop. Znotraj aplikacije, "/" pot ustreza vnosni datoteki (index.js). Drugi rekvizit je asChild. Ta rekvizit vam omogoča, da namesto privzete komponente povezave upodabljate prvo podrejeno komponento z vsemi podanimi rekviziti. To lahko uporabite za prilagajanje videza komponente Link ali za implementacijo logike usmerjanja po meri.

Definiranje dinamičnih poti

Z dinamičnimi potmi lahko dinamično ustvarite poti na podlagi določenih parametrov ali podatkov. Namesto definiranja fiksnega nabora poti pridobite prožnost in prilagodljivost pri navigaciji vaše aplikacije.

Če želite začeti uporabljati dinamične poti v Expo Routerju, morate določiti poti za obdelavo dinamične vsebine. Parametrizirane poti lahko uporabite tako, da določite ogradne oznake znotraj poti poti. Vrednosti za te ogradne oznake bodo nato na voljo vaši poti, ko nekdo navigira do nje.

Na primer, razmislite o aplikaciji za bloganje, kjer želite prikazati posamezne objave v spletnem dnevniku. Določite lahko dinamično pot za obdelavo vsake objave v spletnem dnevniku:

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


vrnitev (

Prikaz objave v spletnem dnevniku z ID: {postId}</Text>
 </View>
 );
};
izvozprivzeto BlogPost;

V tem primeru definirate dinamično komponento poti z imenom BlogPost. The route.params objekt vam omogoča dostop do vrednosti parametrov, posredovanih poti. V tem primeru dostopate do a postId parameter za prikaz ustrezne objave v spletnem dnevniku.

Ustvarjanje dinamičnih poti

Zdaj, ko imate definirano dinamično pot, lahko dinamično ustvarite poti na podlagi podatkov ali uporabniškega vnosa. Na primer, če imate seznam objav v spletnem dnevniku, pridobljen iz API-ja, lahko dinamično ustvarite poti za vsako objavo v spletnem dnevniku.

Tukaj je primer:

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


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


vrnitev (

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

V tem primeru ponavljate čez blogPosts polje in upodabljanje a komponento za vsako objavo. Ko pritisnete objavo, se navigateToBlogPost funkcija teče, mimo postId do navigacijske poti.

Upravljanje dinamičnih poti

Navigacijske dogodke, specifične za dinamično pot, lahko poslušate z uporabo useFocusEffect kavelj.

Na primer:

// app/routes/BlogPost.js
uvoz Reagiraj od"reagirati";
uvoz { Route, useFocusEffect } od"expo-router";
konst BlogPost = ({pot}) => {
konst { postId } = route.params;


 useFocusEffect(() => {
// Pridobi podatke o objavi spletnega dnevnika na podlagi ID-ja objave
// Izvedite vsa druga potrebna dejanja v fokusu
 });


vrnitev (

Prikaz objave v spletnem dnevniku z ID: {postId}</Text>
 </View>
 );
};
izvozprivzeto BlogPost;

V tem primeru je useFocusEffect hook posluša dogodke fokusa, specifične za BlogPost komponento. Znotraj povratnega klica lahko pridobite dodatne podatke, izvedete dejanja ali posodobite zaslon na podlagi izbrane objave v spletnem dnevniku.

Navigacija z dinamičnimi potmi

Za navigacijo do dinamične poti lahko uporabite navigacijske metode, ki jih ponuja Expo Router.

Na primer za navigacijo do BlogPost komponento s posebnim postId, lahko uporabite navigacija.krmariti metoda:

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


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


vrnitev (

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

Ko pritisnete objavo v spletnem dnevniku, se navigateToBlogPost funkcija se bo sprožila z postId.

Expo Router vam pomaga strukturirati vaše izvorne aplikacije

Expo Router ponuja odlično rešitev za upravljanje navigacije v vaših aplikacijah React Native. Expo Router s ponovnim predstavljanjem domače izkušnje usmerjanja ponuja prilagodljivost in enostavnost uporabe.

Raziskovali ste funkcije Expo Routerja, se poglobili v osnovne koncepte usmerjanja in odkrili, kako zgraditi dinamične poti. Z Expo Routerjem lahko ustvarite dinamične navigacijske tokove, obravnavate različne podatke ali uporabniške vnose in prilagodite navigacijo v svoji aplikaciji.