Native ruting redesigned med Expo Router

Filbasert ruting er en vanlig webutviklingsteknikk som kartlegger en URL-bane til en bestemt fil i en prosjektkatalog. Dette systemet unngår de komplekse rutekonfigurasjonene som er involvert i å bygge navigasjonssystemer.

Med utgivelsen av Expo Router-biblioteket er filbasert ruting mulig med React Native-applikasjoner. Expo Router kan være et bedre navigasjonssystem for React Native-utviklere som jobber med Expo.

Navigasjon gjenskapt med Expo Router

Expo-ruteren gir en deklarativ rutingløsning for React Native Expo-apper. Dette systemet er betydelig forskjellig fra hvordan du ville gjort bygge et navigasjonssystem ved hjelp av React Navigation. Expo Router har store bekymringer med å bruke det nåværende fungerende navigasjonssystemet.

Disse problemene inkluderer å ha et navigasjonssystem som ikke fungerer konsekvent overalt, vanskeligheter med å administrere dypkoblinger, og også komplekse oppsett for tilpassede navigasjonsoverganger.

Expo-ruterens filbaserte navigasjon/ruting er et enkelt system som fungerer godt og som allerede er kjent blant JavaScript-utviklere og JavaScript-rammeverk som Next.js, hvor du kan definere ruter.

Installere og sette opp Expo Router

Det er ganske enkelt å migrere Expo-prosjektet ditt fra det gamle navigasjonssystemet til å bruke Expo-ruteren.

Trinn 1: Installer Expo-ruteren

Bruk denne terminalkommandoen til å kjøre installasjonsprogrammet for expo-ruteren:

npx expo installer expo-ruter

Du må også sørge for at du har installert disse peer-avhengighetene:

• reager-native-safe-område-kontekst
• reagere-native-skjermer
• expo-linking
• utstillingsstatuslinje
• reager-native-gest-handler

Hvis noen mangler, kan du installere dem ved å kjøre:

npx expo installasjon 

Trinn 2: Oppdater inngangspunktet

Lage en ny index.js fil for å erstatte din eksisterende App.js inngangspunkt og still inn index.js som appens inngangspunkt inne app.json:

// Sett index.js som inngangspunkt
{
"hoved": "index.js"
}
// Importer følgende i index.js
import"expo-ruter/inngang";

Expo Router bruker en dyplenke skjema for å bestemme hvilken skjerm eller hvilket innhold som skal åpnes ved ruting.

Definer et dypkoblingsskjema for appen din ved å legge til en ordningen eiendom til app.json:

{
"ekspo": {
"ordning": "minapp"
 }
}

Trinn 4: Endelig konfigurasjon

Det siste trinnet er å konfigurere Expo-appens metropakke og konfigurere Babel til å støtte Expo Router i appen din.

Innsiden babel.config.js endre den eksisterende koden til å se slik ut:

modul.eksport = funksjon (api) {
 api.cache(ekte);
komme tilbake {
 forhåndsinnstillinger: ["babel-preset-expo"],
 plugins: [
krever.Løse("expo-ruter/babel"),
/* */
 ],
 };
};

Bygg nå om og start appen din ved å kjøre:

npx expo --clear

Bygg appens ruter med Expo Router

Du kan begynne å sette opp en navigasjonsflyt i app mappe. De index.js filen er utgangspunktet ditt. Expo Router legger til banen til hver fil du oppretter på innsiden app til appens rutesystem med URL-dyplinker for å matche hver side.

Lag for eksempel en SecondScreen.js fil inne i app katalog og eksporter en standardkomponent:

import { StyleSheet, Text, View } fra"reager-innfødt";
import Reagere fra"reagere";
konst Second Screen = () => {
komme tilbake (


Andre skjerm</Text>
 </View>
 </View>
 );
};
eksportmisligholde Second Screen;
konst styles = StyleSheet.create({});

Du kan navigere til denne skjermen fra index.js med useRouter() metode:

import { useRouter } fra"expo-ruter";
eksportmisligholdefunksjonSide() {
konst navigasjon = brukRouter();
komme tilbake (

Hei verden</Text>
Dette er den første siden av appen din.</Text>
 tittel="Naviger til Second Screen"
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Her tildeler du ruteren til navigasjon og bruker den inne i Button-elementet ved å ringe navigation.push("/second"). Argumentet i push er filbanen til skjermen du ønsker å navigere til.

Innsiden Andre skjerm du kan også navigere til indeksskjermen slik:

import { Link } fra"expo-ruter";
konst Second Screen = () => {
komme tilbake (


Andre skjerm</Text>
"/" som barn>

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

Koblingselementet bruker en href prop for å spesifisere banen. Inne i appen "/" banen tilsvarer oppføringsfilen (index.js). Den andre rekvisitten er asChild. Denne rekvisitten lar deg gjengi en første underordnet komponent med alle de spesifiserte rekvisittene i stedet for standard Link-komponenten. Du kan bruke dette til å tilpasse utseendet til Link-komponenten eller til å implementere tilpasset rutinglogikk.

Definere dynamiske ruter

Med dynamiske ruter kan du generere ruter dynamisk basert på bestemte parametere eller data. I stedet for å definere et fast sett med ruter, får du fleksibilitet og tilpasningsevne i appens navigasjon.

For å begynne å bruke dynamiske ruter i Expo Router, må du definere rutene for å håndtere dynamisk innhold. Du kan bruke parameteriserte ruter ved å spesifisere plassholdere innenfor rutens bane. Verdiene for disse plassholderne vil da være tilgjengelige for ruten din når noen navigerer til den.

Vurder for eksempel en blogg-app der du vil vise individuelle blogginnlegg. Du kan definere en dynamisk rute for å håndtere hvert av blogginnleggene:

// app/routes/BlogPost.js
import Reagere fra"reagere";
import { useRouter } fra"expo-ruter";
konst Blogginnlegg = ({ rute }) => {
konst { postId } = rute.params;
komme tilbake (

Viser blogginnlegg med ID: {postId}</Text>
 </View>
 );
};
eksportmisligholde Blogg innlegg;

I dette eksemplet definerer du en dynamisk rutekomponent med navn Blogg innlegg. De route.params objekt lar deg få tilgang til parameterverdiene som sendes til ruten. I dette tilfellet har du tilgang til en postId parameter for å vise det tilsvarende blogginnlegget.

Generering av dynamiske ruter

Nå som du har definert en dynamisk rute, kan du generere ruter dynamisk basert på data eller brukerinndata. Hvis du for eksempel har en liste over blogginnlegg hentet fra et API, kan du dynamisk generere ruter for hvert blogginnlegg.

Her er et eksempel:

// app/components/BlogList.js
import Reagere fra"reagere";
import { useNavigation } fra"expo-ruter";
konst Bloggliste = ({ blogginnlegg }) => {
konst navigasjon = brukNavigasjon();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogg innlegg", { postId });
 };
komme tilbake (

 {blogPosts.map((post) => (
 key={post.id}
 onPress={() => naviger til blogginnlegg (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportmisligholde Bloggliste;

I dette eksemplet itererer du over blogginnlegg array og gjengi en komponent for hvert innlegg. Når du trykker på et innlegg, vises naviger til blogginnlegg funksjonen kjører, passerer postId til navigasjonsruten.

Håndtering av dynamiske ruter

Du kan lytte til navigasjonshendelser som er spesifikke for en dynamisk rute ved å bruke useFocusEffect krok.

For eksempel:

// app/routes/BlogPost.js
import Reagere fra"reagere";
import { Rute, bruk FocusEffect } fra"expo-ruter";
konst Blogginnlegg = ({ rute }) => {
konst { postId } = rute.params;
 useFocusEffect(() => {
// Hent blogginnleggsdata basert på postId
// Utfør andre nødvendige handlinger på fokus
 });
komme tilbake (

Viser blogginnlegg med ID: {postId}</Text>
 </View>
 );
};
eksportmisligholde Blogg innlegg;

I dette eksemplet er useFocusEffect krok lytter etter fokushendelser som er spesifikke for Blogg innlegg komponent. Inne i tilbakeringingen kan du hente ytterligere data, utføre handlinger eller oppdatere skjermen basert på det fokuserte blogginnlegget.

Navigering med dynamiske ruter

For å navigere til en dynamisk rute, kan du bruke navigasjonsmetodene som tilbys av Expo Router.

For eksempel for å navigere til Blogg innlegg komponent med en bestemt postId, kan du bruke navigation.navigate metode:

// app/components/BlogList.js
import Reagere fra"reagere";
import { useNavigation } fra"expo-ruter";
konst Bloggliste = ({ blogginnlegg }) => {
konst navigasjon = brukNavigasjon();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogg innlegg", { postId });
 };
komme tilbake (

 {blogPosts.map((post) => (
 key={post.id}
 onPress={() => naviger til blogginnlegg (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportmisligholde Bloggliste;

Når du trykker på et blogginnlegg, vises naviger til blogginnlegg funksjonen vil utløses med postId.

Expo Router hjelper deg med å strukturere dine egne apper

Expo Router gir en utmerket løsning for å administrere navigasjon i React Native-appene dine. Ved å gjenskape den opprinnelige rutingopplevelsen, tilbyr Expo Router fleksibilitet og brukervennlighet.

Du har utforsket funksjonene til Expo Router, fordypet deg i grunnleggende rutingkonsepter og oppdaget hvordan du bygger dynamiske ruter. Med Expo Router kan du lage dynamiske navigasjonsflyter, håndtere varierende data eller brukerinndata og tilpasse navigasjonen i appen din.