Native routing omarbetad med Expo Router

Filbaserad routing är en vanlig webbutvecklingsteknik som mappar en URL-sökväg till en specifik fil i en projektkatalog. Detta system undviker de komplexa ruttkonfigurationer som är involverade i att bygga navigationssystem.

Med lanseringen av Expo Router-biblioteket är filbaserad routing möjlig med React Native-applikationer. Expo Router kan vara ett bättre navigationssystem för React Native-utvecklare som arbetar med Expo.

Navigation omarbetad med Expo Router

Expo-routern tillhandahåller en deklarativ routinglösning för React Native Expo-appar. Detta system skiljer sig avsevärt från hur du skulle göra bygga ett navigationssystem med hjälp av React Navigation. Expo Router har stora problem med att använda det nuvarande fungerande navigationssystemet.

Dessa problem inkluderar att ha ett navigationssystem som inte fungerar konsekvent överallt, svårigheter att hantera djuplänkar och även komplexa inställningar för anpassade navigeringsövergångar.

Expo-routerns filbaserade navigering/routing är ett enkelt system som fungerar bra och som redan är bekant bland JavaScript-utvecklare och JavaScript-ramverk som Next.js, där du kan definiera rutter.

Installera och konfigurera Expo Router

Det är ganska enkelt att migrera ditt Expo-projekt från det gamla navigationssystemet till att använda Expo-routern.

Steg 1: Installera Expo Router

Använd det här terminalkommandot för att köra installationsprogrammet för expo-routern:

npx expo installera expo-router

Du måste också se till att du har installerat dessa peer-beroenden:

• reagera-native-safe-area-context
• reagera-native-skärmar
• expo-länkning
• expo-statusfält
• reagera-infödd-gest-hanterare

Om några saknas kan du installera dem genom att köra:

npx expo installera 

Steg 2: Uppdatera ingångspunkten

Skapa en ny index.js fil för att ersätta din befintliga App.js ingångspunkt och ställ in index.js som appens ingångspunkt inuti app.json:

// Ställ in index.js som startpunkt
{
"huvudsaklig": "index.js"
}
// Importera följande inuti index.js
importera"expo-router/entry";

Expo Router använder en djuplänk schema för att bestämma vilken skärm eller innehåll som ska öppnas vid routing.

Definiera ett djuplänkningsschema för din app genom att lägga till en schema egendom till app.json:

{
"expo": {
"schema": "minapp"
 }
}

Steg 4: Slutlig konfiguration

Det sista steget är att konfigurera din Expo-apps tunnelbanepaket och konfigurera Babel för att stödja Expo Router i din app.

Inuti babel.config.js ändra den befintliga koden så att den ser ut så här:

modul.export = fungera (api) {
 api.cache(Sann);
lämna tillbaka {
 förinställningar: ["babel-preset-expo"],
 plugins: [
behöva.lösa("expo-router/babel"),
/* */
 ],
 };
};

Bygg nu om och starta din app genom att köra:

npx expo --clear

Bygg din apps rutter med Expo Router

Du kan börja ställa in ett navigeringsflöde inom app mapp. De index.js filen är din utgångspunkt. Expo Router lägger till sökvägen för varje fil du skapar inuti app till appens ruttsystem med URL-djuplänkar för att matcha varje sida.

Skapa till exempel en SecondScreen.js fil inuti app katalog och exportera en standardkomponent:

importera { StyleSheet, Text, View } från"reagera-native";
importera Reagera från"reagera";
konst Second Screen = () => {
lämna tillbaka (


Andra skärmen</Text>
 </View>
 </View>
 );
};
exporterastandard Second Screen;
konst styles = StyleSheet.create({});

Du kan navigera till den här skärmen från index.js med useRouter() metod:

importera { useRouter } från"expo-router";
exporterastandardfungeraSida() {
konst navigation = useRouter();
lämna tillbaka (

Hej världen</Text>
Det här är första sidan av din app.</Text>
 titel="Navigera till Second Screen"
 onPress={() => {
 navigation.push("/Second Screen");
 }}
 />
 </View>
 );
}

Här tilldelar du routern navigering och använder den inuti Button-elementet genom att ringa navigation.push("/second"). Argumentet inom push är filsökvägen till skärmen du vill navigera till.

Inuti Andra skärm du kan också navigera till indexskärmen så här:

importera { Länk } från"expo-router";
konst Second Screen = () => {
lämna tillbaka (


Andra skärmen</Text>
"/" som barn>

Navigera till index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Länkelementet tar en href prop för att ange sökvägen. Inuti appen, den "/" sökvägen motsvarar inmatningsfilen (index.js). Den andra rekvisiten är asChild. Denna rekvisita låter dig rendera en första underordnad komponent med alla angivna rekvisita istället för standardlänkkomponenten. Du kan använda detta för att anpassa utseendet på Link-komponenten eller för att implementera anpassad routinglogik.

Definiera dynamiska rutter

Med Dynamiska rutter kan du generera rutter dynamiskt baserat på vissa parametrar eller data. Istället för att definiera en fast uppsättning rutter får du flexibilitet och anpassningsförmåga i din apps navigering.

För att börja använda dynamiska rutter i Expo Router måste du definiera rutter för att hantera dynamiskt innehåll. Du kan använda parametriserade rutter genom att ange platshållare inom ruttens sökväg. Värdena för dessa platshållare kommer sedan att vara tillgängliga för din rutt när någon navigerar till den.

Överväg till exempel en bloggapp där du vill visa enskilda blogginlägg. Du kan definiera en dynamisk väg för att hantera vart och ett av blogginläggen:

// app/routes/BlogPost.js
importera Reagera från"reagera";
importera { useRouter } från"expo-router";
konst Blogpost = ({ rutt }) => {
konst { postId } = route.params;
lämna tillbaka (

Visar blogginlägg med ID: {postId}</Text>
 </View>
 );
};
exporterastandard Blogpost;

I det här exemplet definierar du en dynamisk ruttkomponent med namnet Blogpost. De route.params objekt ger dig tillgång till parametervärdena som skickas till rutten. I det här fallet kommer du åt en postId parameter för att visa motsvarande blogginlägg.

Generera dynamiska rutter

Nu när du har definierat en dynamisk rutt kan du generera rutter dynamiskt baserat på data eller användarinmatning. Om du till exempel har en lista med blogginlägg hämtade från ett API, kan du dynamiskt generera rutter för varje blogginlägg.

Här är ett exempel:

// app/components/BlogList.js
importera Reagera från"reagera";
importera { useNavigation } från"expo-router";
konst Bloglist = ({ blogginlägg }) => {
konst navigation = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogginlägg", { postId });
 };
lämna tillbaka (

 {blogPosts.map((posta) => (
 key={post.id}
 onPress={() => navigera till blogginlägg (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exporterastandard Bloglist;

I det här exemplet itererar du över blogginlägg array och rendera en komponent för varje inlägg. När du trycker på ett inlägg visas navigera till blogginlägg funktionen körs och passerar postId till navigeringsvägen.

Hantera dynamiska rutter

Du kan lyssna på navigationshändelser som är specifika för en dynamisk rutt med hjälp av useFocusEffect krok.

Till exempel:

// app/routes/BlogPost.js
importera Reagera från"reagera";
importera { Route, useFocusEffect } från"expo-router";
konst Blogpost = ({ rutt }) => {
konst { postId } = route.params;
 useFocusEffect(() => {
// Hämta blogginläggsdata baserat på postId
// Utför alla andra nödvändiga åtgärder på fokus
 });
lämna tillbaka (

Visar blogginlägg med ID: {postId}</Text>
 </View>
 );
};
exporterastandard Blogpost;

I det här exemplet är useFocusEffect krok lyssnar efter fokushändelser som är specifika för Blogpost komponent. Inuti återuppringningen kan du hämta ytterligare data, utföra åtgärder eller uppdatera skärmen baserat på det fokuserade blogginlägget.

Navigera med dynamiska rutter

För att navigera till en dynamisk rutt kan du använda de navigeringsmetoder som tillhandahålls av Expo Router.

Till exempel för att navigera till Blogpost komponent med en specifik postId, kan du använda navigation.navigera metod:

// app/components/BlogList.js
importera Reagera från"reagera";
importera { useNavigation } från"expo-router";
konst Bloglist = ({ blogginlägg }) => {
konst navigation = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogginlägg", { postId });
 };
lämna tillbaka (

 {blogPosts.map((posta) => (
 key={post.id}
 onPress={() => navigera till blogginlägg (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exporterastandard Bloglist;

När du trycker på ett blogginlägg visas navigera till blogginlägg funktionen aktiveras med postId.

Expo Router hjälper dig att strukturera dina inbyggda appar

Expo Router ger en utmärkt lösning för att hantera navigering i dina React Native-appar. Genom att ombilda den inhemska routingupplevelsen erbjuder Expo Router flexibilitet och användarvänlighet.

Du har utforskat funktionerna i Expo Router, fördjupat dig i grundläggande routingkoncept och upptäckt hur man bygger dynamiska rutter. Med Expo Router kan du skapa dynamiska navigeringsflöden, hantera varierande data eller användarinmatning och anpassa navigeringen i din app.