A natív útválasztás újragondolva az Expo Routerrel

A fájlalapú útválasztás egy elterjedt webfejlesztési technika, amely egy URL elérési utat képez le egy adott fájlhoz egy projektkönyvtárban. Ez a rendszer elkerüli a navigációs rendszerek építésével kapcsolatos összetett útvonal-konfigurációkat.

Az Expo Router könyvtár megjelenésével a fájl alapú útválasztás lehetséges a React Native alkalmazásokkal. Az Expo Router jobb navigációs rendszer lehet az Expo-val dolgozó React Native fejlesztők számára.

A navigáció újragondolva az Expo Routerrel

Az expo útválasztó deklaratív útválasztási megoldást kínál a React Native Expo alkalmazásokhoz. Ez a rendszer jelentősen eltér attól, amit Ön tenne navigációs rendszert építeni a React Navigation segítségével. Az Expo Router komoly aggályokat vet fel a jelenlegi működő navigációs rendszer használatával kapcsolatban.

Ezek közé tartozik a nem mindenhol egyenletesen működő navigációs rendszer, a mélyhivatkozások kezelésének nehézségei, valamint az egyéni navigációs átmenetek bonyolult beállításai.

Az expo router fájl alapú navigáció/útválasztás egy egyszerű rendszer, amely jól működik, és már ismerős a JavaScript fejlesztők és a JavaScript keretrendszerek, mint pl. Next.js, ahol útvonalakat határozhat meg.

Expo Router telepítése és beállítása

Meglehetősen egyszerű áttelepíteni az Expo projektet a régi navigációs rendszerről az Expo útválasztóra.

1. lépés: Telepítse az Expo Routert

Használja ezt a terminálparancsot az expo-router telepítő futtatásához:

npx expo install expo-router

Győződjön meg arról is, hogy telepítette ezeket a társfüggőségeket:

• react-native-safe-area-context
• react-native-screens
• expo-linkelés
• expo-állapotsor
• reagálni-bennszülött-gesztuskezelő

Ha valamelyik hiányzik, a következő futtatásával telepítheti őket:

npx expo telepítés 

2. lépés: Frissítse a belépési pontot

Újat csinálni index.js fájlt, hogy lecserélje a meglévőt App.js belépési pontot, és állítsa be a index.js mint az alkalmazás belépési pontja app.json:

// Az index.js beállítása belépési pontként
{
"fő": "index.js"
}
// Importálja a következőt az index.js-be
import"expo-router/entry";

Az Expo Router a mély hivatkozás séma annak meghatározásához, hogy melyik képernyőt vagy tartalmat nyissa meg az útválasztáskor.

Határozzon meg mélylinkelési sémát az alkalmazáshoz az a. hozzáadásával rendszer tulajdonát app.json:

{
"expo": {
"rendszer": "myapp"
 }
}

4. lépés: Végső konfiguráció

Az utolsó lépés az Expo alkalmazás metro bundlerének beállítása, és a Babel konfigurálása az Expo Router támogatására az alkalmazásban.

Belül babel.config.js módosítsa a meglévő kódot a következőre:

modul.export = funkció (api) {
 api.cache(igaz);
Visszatérés {
 előbeállítások: ["bábel-preset-expo"],
 bővítmények: [
igényelnek.elhatározás("expo-router/bábel"),
/* */
 ],
 };
};

Most építse újra és indítsa el az alkalmazást a következő futással:

npx expo -- tiszta

Alkalmazása útvonalainak építése az Expo Routerrel

Elkezdheti a navigációs folyamat beállítását a kb mappát. A index.js fájl a kiindulópont. Az Expo Router minden benne létrehozott fájl elérési útját hozzáadja kb az alkalmazás útvonalrendszeréhez az egyes oldalakhoz illeszkedő URL-mélylinkekkel.

Például hozzon létre a SecondScreen.js fájl belsejében kb könyvtárba, és exportáljon egy alapértelmezett összetevőt:

import { Stíluslap, Szöveg, Nézet } tól től"react-native";
import Reagál tól től"reagál";
const SecondScreen = () => {
Visszatérés (


Második képernyő</Text>
 </View>
 </View>
 );
};
exportalapértelmezett SecondScreen;
const styles = StyleSheet.create({});

Innen navigálhat erre a képernyőre index.js a... val useRouter() módszer:

import { useRouter } tól től"expo-router";
exportalapértelmezettfunkcióoldal() {
const navigáció = userRouter();
Visszatérés (

Helló világ</Text>
Ez az első oldal nak,-nek az alkalmazásod.</Text>
 cím="Navigáció a SecondScreen-re"
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Itt rendelheti hozzá a routert a navigációhoz, és hívással használhatja a Button elemen belül navigation.push("/second"). A push-on belüli argumentum annak a képernyőnek az elérési útja, amelyre navigálni kíván.

Belül SecondScreen a következőképpen navigálhat az index képernyőre:

import { Link } tól től"expo-router";
const SecondScreen = () => {
Visszatérés (


Második képernyő</Text>
"/" asChild>

Keresse meg az index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

A link elem egy href propot vesz igénybe az elérési út megadásához. Az alkalmazáson belül a "/" elérési útja a belépési fájlnak (index.js) felel meg. A második kellék az asChild. Ez a prop lehetővé teszi, hogy az alapértelmezett Link komponens helyett egy első gyermekkomponenst jelenítsen meg az összes megadott kellékkel. Ezzel személyre szabhatja a Hivatkozás összetevő megjelenését vagy megvalósíthatja az egyéni útválasztási logikát.

Dinamikus útvonalak meghatározása

A Dinamikus útvonalakkal bizonyos paraméterek vagy adatok alapján dinamikusan hozhat létre útvonalakat. Ahelyett, hogy rögzített útvonalakat határozna meg, rugalmasabbá és alkalmazkodóbbá válik az alkalmazás navigációja.

A dinamikus útvonalak használatának megkezdéséhez az Expo Routerben meg kell határoznia az útvonalakat a dinamikus tartalom kezeléséhez. A paraméterezett útvonalakat úgy használhatja, hogy helyőrzőket ad meg az útvonal útvonalán. Ezeknek a helyőrzőknek az értékei ezután elérhetők lesznek az útvonalon, amikor valaki arra navigál.

Gondoljon például egy blogíró alkalmazásra, ahol meg szeretné jeleníteni az egyes blogbejegyzéseket. Meghatározhat egy dinamikus útvonalat az egyes blogbejegyzések kezelésére:

// app/routes/BlogPost.js
import Reagál tól től"reagál";
import { useRouter } tól től"expo-router";
const Blogbejegyzés = ({ útvonal }) => {
const { postId } = route.params;
Visszatérés (

Blogbejegyzés megjelenítése val vel ID: {postId}</Text>
 </View>
 );
};
exportalapértelmezett Blog bejegyzés;

Ebben a példában egy dinamikus útvonal-összetevőt határoz meg, melynek neve Blog bejegyzés. A útvonal.params objektum lehetővé teszi az útvonalnak átadott paraméterértékek elérését. Ebben az esetben Ön eléri a postId paramétert a megfelelő blogbejegyzés megjelenítéséhez.

Dinamikus útvonalak generálása

Most, hogy meg van határozva egy dinamikus útvonal, dinamikusan hozhat létre útvonalakat adatok vagy felhasználói bevitel alapján. Ha például rendelkezik egy API-ból lekért blogbejegyzések listájával, dinamikusan generálhat útvonalakat minden egyes blogbejegyzéshez.

Íme egy példa:

// app/components/BlogList.js
import Reagál tól től"reagál";
import { useNavigation } tól től"expo-router";
const BlogList = ({ blogbejegyzések }) => {
const navigáció = useNavigation();
const navigateToBlogPost = (postId) => {
 navigation.navigate("Blog bejegyzés", { postId });
 };
Visszatérés (

 {blogPosts.map((hozzászólás) => (
 kulcs={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportalapértelmezett BlogList;

Ebben a példában a blogbejegyzések tömb és renderelés a komponens minden bejegyzéshez. Amikor megnyom egy bejegyzést, a navigateToBlogPost függvény fut, átadva a postId a navigációs útvonalra.

Dinamikus útvonalak kezelése

A dinamikus útvonalra vonatkozó navigációs eseményeket a segítségével hallgathatja meg useFocusEffect horog.

Például:

// app/routes/BlogPost.js
import Reagál tól től"reagál";
import { Route, useFocusEffect } tól től"expo-router";
const Blogbejegyzés = ({ útvonal }) => {
const { postId } = route.params;
 useFocusEffect(() => {
// Blogbejegyzések adatainak lekérése a postId alapján
// Végezze el a többi szükséges műveletet a fókuszban
 });
Visszatérés (

Blogbejegyzés megjelenítése val vel ID: {postId}</Text>
 </View>
 );
};
exportalapértelmezett Blog bejegyzés;

Ebben a példában a useFocusEffect hook figyeli a fókusz eseményeket Blog bejegyzés összetevő. A visszahíváson belül további adatokat kérhet le, műveleteket hajthat végre, vagy frissítheti a képernyőt a fókuszált blogbejegyzés alapján.

Navigálás dinamikus útvonalakkal

Ha dinamikus útvonalra szeretne navigálni, használhatja az Expo Router által biztosított navigációs módszereket.

Például a Blog bejegyzés komponens egy adott postId, használhatja a navigáció.navigálni módszer:

// app/components/BlogList.js
import Reagál tól től"reagál";
import { useNavigation } tól től"expo-router";
const BlogList = ({ blogbejegyzések }) => {
const navigáció = useNavigation();
const navigateToBlogPost = (postId) => {
 navigation.navigate("Blog bejegyzés", { postId });
 };
Visszatérés (

 {blogPosts.map((hozzászólás) => (
 kulcs={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exportalapértelmezett BlogList;

Amikor megnyom egy blogbejegyzést, a navigateToBlogPost funkció a postId.

Az Expo Router segít strukturálni natív alkalmazásait

Az Expo Router kiváló megoldást kínál a React Native alkalmazások navigációjának kezelésére. A natív útválasztási élmény újragondolásával az Expo Router rugalmasságot és egyszerű használatot kínál.

Felfedezte az Expo Router funkcióit, belemélyedt az alapvető útválasztási koncepciókba, és felfedezte, hogyan építhet dinamikus útvonalakat. Az Expo Routerrel dinamikus navigációs folyamatokat hozhat létre, kezelheti a változó adatokat vagy felhasználói beviteleket, és személyre szabhatja a navigációt az alkalmazásban.