Natívne smerovanie prepracované pomocou smerovača Expo

Smerovanie založené na súboroch je bežná technika vývoja webu, ktorá mapuje cestu URL na konkrétny súbor v adresári projektu. Tento systém sa vyhýba zložitým konfiguráciám smerovania spojeným s budovaním navigačných systémov.

S vydaním knižnice Expo Router je pomocou aplikácií React Native možné smerovanie založené na súboroch. Expo Router by mohol byť lepším navigačným systémom pre vývojárov React Native pracujúcich s Expo.

Navigácia prepracovaná pomocou smerovača Expo

Smerovač expo poskytuje deklaratívne riešenie smerovania pre aplikácie React Native Expo. Tento systém sa výrazne líši od toho, ako by ste to robili vy vytvoriť navigačný systém pomocou React Navigation. Expo Router obmedzuje veľké obavy z používania aktuálne fungujúceho navigačného systému.

Tieto problémy zahŕňajú navigačný systém, ktorý nefunguje všade konzistentne, ťažkosti so správou priamych odkazov a tiež zložité nastavenia pre prechody vlastnej navigácie.

Navigácia/smerovanie založené na súboroch smerovača expo je jednoduchý systém, ktorý funguje dobre a je už známy medzi vývojármi JavaScriptu a frameworkami JavaScript, ako sú napr. Next.js, kde môžete definovať trasy.

Inštalácia a nastavenie smerovača Expo

Je pomerne jednoduché migrovať váš projekt Expo zo starého navigačného systému na používanie smerovača Expo.

Krok 1: Nainštalujte smerovač Expo

Tento príkaz terminálu použite na spustenie inštalačného programu smerovača expo:

npx expo nainštalovať expo-router

Budete sa tiež musieť uistiť, že ste nainštalovali tieto závislosti:

• reakt-native-safe-area-context
• reakčné-natívne obrazovky
• expo-linking
• výstavný-stavový-bar
• reagovať-native-geste-handler

Ak nejaké chýbajú, môžete ich nainštalovať spustením:

inštalácia npx expo 

Krok 2: Aktualizujte vstupný bod

Vytvorte nový index.js súbor, ktorý nahradí váš existujúci App.js vstupný bod a nastavte index.js ako vstupný bod aplikácie vo vnútri app.json:

// Nastaviť index.js ako vstupný bod
{
"Hlavná": "index.js"
}
// Importujte nasledujúci súbor do index.js
importovať"expo-router/vstup";

Expo Router používa a priamy odkaz schému na určenie, ktorá obrazovka alebo obsah sa má otvoriť pri smerovaní.

Definujte schému priamych odkazov pre svoju aplikáciu pridaním a schémy majetok do app.json:

{
"expo": {
"schéma": "moja aplikácia"
 }
}

Krok 4: Konečná konfigurácia

Posledným krokom je nastavenie balíka metra vašej Expo aplikácie a konfigurácia Babel na podporu Expo Router vo vašej aplikácii.

Vnútri babel.config.js upravte existujúci kód tak, aby vyzeral takto:

modul.export = funkciu (api) {
 api.cache(pravda);
vrátiť {
 predvoľby: ["babel-preset-expo"],
 pluginy: [
vyžadovať.rozriešiť("expo-router/babel"),
/* */
 ],
 };
};

Teraz znova vytvorte a spustite aplikáciu spustením:

npx expo --clear

Vytváranie trás vašej aplikácie pomocou smerovača Expo

Môžete začať nastavovať navigačný tok v rámci aplikácie priečinok. The index.js súbor je vaším východiskovým bodom. Expo Router pridá cestu ku každému súboru, ktorý vytvoríte aplikácie do systému smerovania aplikácie s priamymi odkazmi na adresy URL, ktoré zodpovedajú každej stránke.

Napríklad vytvorte a SecondScreen.js súbor vnútri aplikácie adresár a exportujte predvolený komponent:

importovať { StyleSheet, Text, View } od"reaktívny";
importovať Reagovať od"reagovať";
konšt Druhá obrazovka = () => {
vrátiť (


Druhá obrazovka</Text>
 </View>
 </View>
 );
};
exportpredvolená Druhá obrazovka;
konšt styles = StyleSheet.create({});

Na túto obrazovku môžete prejsť z index.js s useRouter() metóda:

importovať { useRouter } od"expo-router";
exportpredvolenáfunkciuStránka() {
konšt navigácia = useRouter();
vrátiť (

Ahoj svet</Text>
Toto je prvá strana z vaša aplikácia.</Text>
 titul="Navigovať na druhú obrazovku"
 onPress={() => {
 navigácia.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Tu priradíte router k navigácii a použijete ho vo vnútri prvku Button zavolaním navigácia.push("/sekunda"). Argument v rámci push je cesta k súboru obrazovky, na ktorú chcete prejsť.

Vnútri Druhá obrazovka na indexovú obrazovku môžete prejsť aj takto:

importovať { Link } od"expo-router";
konšt Druhá obrazovka = () => {
vrátiť (


Druhá obrazovka</Text>
"/" akoChild>

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

Prvok odkazu používa rekvizitu href na určenie cesty. Vnútri aplikácie, "/" cesta zodpovedá vstupnému súboru (index.js). Druhá rekvizita je asChild. Táto rekvizita vám umožňuje vykresliť prvý dcérsky komponent so všetkými špecifikovanými rekvizitami namiesto predvoleného komponentu Link. Môžete to použiť na prispôsobenie vzhľadu komponentu Link alebo na implementáciu vlastnej logiky smerovania.

Definovanie dynamických trás

Pomocou dynamických trás môžete generovať trasy dynamicky na základe určitých parametrov alebo údajov. Namiesto definovania pevnej sady trás získate flexibilitu a prispôsobivosť v navigácii vašej aplikácie.

Ak chcete začať používať dynamické trasy v Expo Router, musíte definovať trasy na spracovanie dynamického obsahu. Parametrizované trasy môžete použiť zadaním zástupných symbolov v rámci cesty trasy. Hodnoty pre tieto zástupné symboly budú potom k dispozícii pre vašu trasu, keď na ňu niekto naviguje.

Predstavte si napríklad blogovaciu aplikáciu, v ktorej chcete zobrazovať jednotlivé blogové príspevky. Môžete definovať dynamickú cestu na spracovanie každého z blogových príspevkov:

// app/routes/BlogPost.js
importovať Reagovať od"reagovať";
importovať { useRouter } od"expo-router";
konšt Blogový príspevok = ({ trasa }) => {
konšt { postId } = route.params;
vrátiť (

Zobrazuje sa blogový príspevok s ID: {postId}</Text>
 </View>
 );
};
exportpredvolená Príspevok v blogu;

V tomto príklade definujete komponent dynamickej trasy s názvom Príspevok v blogu. The trasa.param objekt vám umožňuje prístup k hodnotám parametrov odovzdaných do trasy. V tomto prípade pristupujete k a postId parameter na zobrazenie príslušného blogového príspevku.

Generovanie dynamických trás

Teraz, keď máte definovanú dynamickú trasu, môžete trasy generovať dynamicky na základe údajov alebo vstupu používateľa. Napríklad, ak máte zoznam blogových príspevkov stiahnutých z API, môžete dynamicky generovať trasy pre každý blogový príspevok.

Tu je príklad:

// app/components/BlogList.js
importovať Reagovať od"reagovať";
importovať { useNavigation } od"expo-router";
konšt BlogList = ({ blogposts }) => {
konšt navigácia = useNavigation();
konšt navigateToBlogPost = (postId) => {
 navigácia.navigate("Príspevok v blogu", { postId });
 };
vrátiť (

 {blogPosts.map((príspevok) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportpredvolená BlogList;

V tomto príklade iterujete cez blogposts pole a vykreslenie a komponent pre každý príspevok. Keď stlačíte príspevok, navigateToBlogPost funkcia beží a prechádza cez postId na navigačnú trasu.

Spracovanie dynamických trás

Môžete počúvať navigačné udalosti špecifické pre dynamickú trasu pomocou použiteFocusEffect háčik.

Napríklad:

// app/routes/BlogPost.js
importovať Reagovať od"reagovať";
importovať { Route, useFocusEffect } od"expo-router";
konšt Blogový príspevok = ({ trasa }) => {
konšt { postId } = route.params;
 useFocusEffect(() => {
// Načítanie údajov blogových príspevkov na základe postId
// Vykonajte všetky ďalšie potrebné akcie so zameraním
 });
vrátiť (

Zobrazuje sa blogový príspevok s ID: {postId}</Text>
 </View>
 );
};
exportpredvolená Príspevok v blogu;

V tomto príklade použiteFocusEffect hook počúva na udalosti zamerania špecifické pre Príspevok v blogu komponent. V rámci spätného volania môžete získať ďalšie údaje, vykonať akcie alebo aktualizovať obrazovku na základe zameraného blogového príspevku.

Navigácia s dynamickými trasami

Ak chcete navigovať na dynamickú trasu, môžete použiť metódy navigácie, ktoré poskytuje Expo Router.

Napríklad na navigáciu do Príspevok v blogu komponent so špecifickým postId, môžete použiť navigácia.navigovať metóda:

// app/components/BlogList.js
importovať Reagovať od"reagovať";
importovať { useNavigation } od"expo-router";
konšt BlogList = ({ blogposts }) => {
konšt navigácia = useNavigation();
konšt navigateToBlogPost = (postId) => {
 navigácia.navigate("Príspevok v blogu", { postId });
 };
vrátiť (

 {blogPosts.map((príspevok) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportpredvolená BlogList;

Keď stlačíte blogový príspevok, navigateToBlogPost funkcia sa spustí s postId.

Expo Router vám pomôže štruktúrovať vaše natívne aplikácie

Expo Router poskytuje vynikajúce riešenie pre správu navigácie vo vašich aplikáciách React Native. Vďaka prepracovaniu natívneho smerovania ponúka Expo Router flexibilitu a jednoduché použitie.

Preskúmali ste funkcie Expo Router, ponorili ste sa do základných konceptov smerovania a zistili ste, ako vytvoriť dynamické trasy. Pomocou smerovača Expo Router môžete vytvárať dynamické navigačné toky, spracovávať rôzne údaje alebo vstupy používateľov a prispôsobiť navigáciu vo svojej aplikácii.