Ryd op i dine URL-ruter, selv på mobilapps, ved hjælp af Expo Router-biblioteket.

Filbaseret routing er en almindelig webudviklingsteknik, der kortlægger en URL-sti til en specifik fil i en projektmappe. Dette system undgår de komplekse rutekonfigurationer, der er involveret i bygningsnavigationssystemer.

Med udgivelsen af ​​Expo Router-biblioteket er filbaseret routing mulig med React Native-applikationer. Expo Router kunne være et bedre navigationssystem for React Native-udviklere, der arbejder med Expo.

Navigation genoptænkt med Expo Router

Expo-routeren giver en deklarativ routingløsning til React Native Expo-apps. Dette system er betydeligt anderledes end, hvordan du ville bygge et navigationssystem ved hjælp af React Navigation. Expo Router har store bekymringer med at bruge det nuværende fungerende navigationssystem.

Disse problemer inkluderer at have et navigationssystem, der ikke fungerer konsekvent overalt, vanskeligheder med at administrere dybe links og også komplekse opsætninger til brugerdefinerede navigationsovergange.

instagram viewer

Expo-routeren filbaserede navigation/routing er et simpelt system, der fungerer godt og allerede er kendt blandt JavaScript-udviklere og JavaScript-rammer som f.eks. Next.js, hvor du kan definere ruter.

Installation og opsætning af Expo Router

Det er ret nemt at migrere dit Expo-projekt fra det gamle navigationssystem til at bruge Expo-routeren.

Trin 1: Installer Expo Router

Brug denne terminalkommando til at køre installationsprogrammet til expo-router:

npx expo installer expo-router

Du skal også sikre dig, at du har installeret disse peer-afhængigheder:

  • reagere-native-sikkert-område-kontekst
  • reagere-native-skærme
  • expo-linking
  • expo-status-bar
  • reagere-indfødt-gest-handler

Hvis nogen mangler, kan du installere dem ved at køre:

npx expo installation

Trin 2: Opdater indgangspunktet

Opret en ny index.js fil for at erstatte din eksisterende App.js indgangspunkt og indstil index.js som appens indgangspunkt indeni app.json:

// Indstil index.js som indgangspunkt
{
"hoved": "index.js"
}
// Importer følgende inde i index.js
importere"expo-router/indgang";

Expo Router bruger en dybt link skema til at bestemme hvilken skærm eller hvilket indhold der skal åbnes ved routing.

Definer et dybt link-skema for din app ved at tilføje en ordning ejendom til app.json:

{
"ekspo": {
"skema": "min app"
 }
}

Trin 4: Endelig konfiguration

Det sidste trin er at konfigurere din Expo-apps metrobundter og konfigurere Babel til at understøtte Expo Router i din app.

Inde babel.config.js ændre den eksisterende kode til at se sådan ud:

modul.eksport = fungere (api) {
 api.cache(rigtigt);
Vend tilbage {
 forudindstillinger: ["babel-preset-expo"],
 plugins: [
kræve.beslutte("expo-router/babel"),
/* */
 ],
 };
};

Genopbyg og start nu din app ved at køre:

npx expo --clear
2 billeder

Byg din apps ruter med Expo Router

Du kan begynde at opsætte et navigationsflow i app folder. Det index.js fil er dit udgangspunkt. Expo Router tilføjer stien til hver fil, du opretter indeni app til appens rutesystem med dybe URL-links, der matcher hver side.

Opret f.eks. en SecondScreen.js fil inde i app mappe og eksporter en standardkomponent:

importere { StyleSheet, Text, View } fra"reager-native";
importere Reagere fra"reagere";
konst Second Screen = () => {
Vend tilbage (


Anden skærm</Text>
 </View>
 </View>
 );
};


eksportStandard Anden skærm;
konst styles = StyleSheet.create({});

Du kan navigere til denne skærm fra index.js med useRouter() metode:

importere { brug Router } fra"expo-router";
eksportStandardfungereSide() {
konst navigation = useRouter();


Vend tilbage (

Hej verden</Text>
Dette er den første side af din app.</Text>
 titel="Naviger til Second Screen"
 onPress={() => {
 navigation.push("/Second Screen");
 }}
 />
 </View>
 );
}

Her tildeler du routeren til navigation og bruger den inde i Button-elementet ved at ringe navigation.push("/sekund"). Argumentet i push er filstien til den skærm, du ønsker at navigere til.

Inde Anden skærm du kan også navigere til indeksskærmen sådan her:

importere { Link } fra"expo-router";
konst Second Screen = () => {
Vend tilbage (


Anden skærm</Text>
"/" som barn>

Naviger til index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Linkelementet tager en href-prop for at angive stien. Inde i appen, den "/" sti svarer til indtastningsfilen (index.js). Den anden rekvisit er asChild. Denne rekvisit giver dig mulighed for at gengive en første underordnede komponent med alle de specificerede rekvisitter i stedet for standardlink-komponenten. Du kan bruge dette til at tilpasse udseendet af Link-komponenten eller til at implementere tilpasset routinglogik.

Definition af dynamiske ruter

Med dynamiske ruter kan du generere ruter dynamisk baseret på bestemte parametre eller data. I stedet for at definere et fast sæt ruter, opnår du fleksibilitet og tilpasningsevne i din apps navigation.

For at begynde at bruge dynamiske ruter i Expo Router, skal du definere de ruter, der skal håndtere dynamisk indhold. Du kan bruge parametriserede ruter ved at angive pladsholdere inden for rutens sti. Værdierne for disse pladsholdere vil derefter være tilgængelige for din rute, når nogen navigerer til den.

Overvej for eksempel en blogging-app, hvor du vil vise individuelle blogindlæg. Du kan definere en dynamisk rute til at håndtere hvert af blogindlæggene:

// app/routes/BlogPost.js
importere Reagere fra"reagere";
importere { brug Router } fra"expo-router";
konst Blogpost = ({ rute }) => {
konst { postId } = rute.params;


Vend tilbage (

Viser blogindlæg med ID: {postId}</Text>
 </View>
 );
};
eksportStandard Blogindlæg;

I dette eksempel definerer du en dynamisk rutekomponent med navn Blogindlæg. Det route.params objekt giver dig adgang til de parameterværdier, der sendes til ruten. I dette tilfælde har du adgang til en postId parameter for at vise det tilsvarende blogindlæg.

Generering af dynamiske ruter

Nu hvor du har defineret en dynamisk rute, kan du generere ruter dynamisk baseret på data eller brugerinput. For eksempel, hvis du har en liste over blogindlæg hentet fra en API, kan du dynamisk generere ruter for hvert blogindlæg.

Her er et eksempel:

// app/components/BlogList.js
importere Reagere fra"reagere";
importere { useNavigation } fra"expo-router";
konst Blogliste = ({ blogindlæg }) => {
konst navigation = useNavigation();


konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogindlæg", { postId });
 };


Vend tilbage (

 {blogPosts.map((stolpe) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportStandard BlogList;

I dette eksempel itererer du over blogindlæg array og render en komponent for hver post. Når du trykker på et opslag, vises navigerTilBlogPost funktionen kører, passerer postId til navigationsruten.

Håndtering af dynamiske ruter

Du kan lytte til navigationsbegivenheder, der er specifikke for en dynamisk rute ved hjælp af useFocusEffect krog.

For eksempel:

// app/routes/BlogPost.js
importere Reagere fra"reagere";
importere { Rute, useFocusEffect } fra"expo-router";
konst Blogpost = ({ rute }) => {
konst { postId } = rute.params;


 useFocusEffect(() => {
// Hent blogindlægsdata baseret på postId
// Udfør andre nødvendige handlinger på fokus
 });


Vend tilbage (

Viser blogindlæg med ID: {postId}</Text>
 </View>
 );
};
eksportStandard Blogindlæg;

I dette eksempel er useFocusEffect krog lytter efter fokusbegivenheder, der er specifikke for Blogindlæg komponent. Inde i tilbagekaldet kan du hente yderligere data, udføre handlinger eller opdatere skærmen baseret på det fokuserede blogindlæg.

Navigering med dynamiske ruter

For at navigere til en dynamisk rute kan du bruge navigationsmetoderne fra Expo Router.

For eksempel for at navigere til Blogindlæg komponent med en bestemt postId, kan du bruge navigation.navigere metode:

// app/components/BlogList.js
importere Reagere fra"reagere";
importere { useNavigation } fra"expo-router";
konst Blogliste = ({ blogindlæg }) => {
konst navigation = useNavigation();


konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogindlæg", { postId });
 };


Vend tilbage (

 {blogPosts.map((stolpe) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportStandard BlogList;

Når du trykker på et blogindlæg, vises navigerTilBlogPost funktionen udløses med postId.

Expo Router hjælper dig med at strukturere dine oprindelige apps

Expo-routeren giver en fremragende løsning til styring af navigation i dine React Native-apps. Ved at genskabe den oprindelige routingoplevelse tilbyder Expo Router fleksibilitet og brugervenlighed.

Du har udforsket funktionerne i Expo Router, dykket ned i grundlæggende routing-koncepter og opdaget, hvordan du bygger dynamiske ruter. Med Expo Router kan du skabe dynamiske navigationsflows, håndtere varierende data eller brugerinput og tilpasse navigationen i din app.