Alkuperäinen reititys on suunniteltu uudelleen Expo Routerilla

Tiedostopohjainen reititys on yleinen verkkokehitystekniikka, joka kartoittaa URL-polun tiettyyn tiedostoon projektihakemistossa. Tämä järjestelmä välttää navigointijärjestelmien rakentamiseen liittyvät monimutkaiset reitityskokoonpanot.

Expo Router -kirjaston julkaisun myötä tiedostopohjainen reititys on mahdollista React Native -sovelluksilla. Expo Router voisi olla parempi navigointijärjestelmä Expon kanssa työskenteleville React Native -kehittäjille.

Navigointi uudistettu Expo Routerilla

Expo-reititin tarjoaa deklaratiivisen reititysratkaisun React Native Expo -sovelluksille. Tämä järjestelmä on huomattavasti erilainen kuin sinä rakentaa navigointijärjestelmä React Navigationin avulla. Expo Router aiheuttaa suuria huolenaiheita nykyisen toimivan navigointijärjestelmän käytössä.

Näitä ongelmia ovat muun muassa navigointijärjestelmä, joka ei toimi johdonmukaisesti kaikkialla, vaikeudet syvälinkkien hallinnassa ja myös monimutkaiset asetukset mukautetuille navigointisiirtymille.

Expo-reitittimen tiedostopohjainen navigointi/reititys on yksinkertainen järjestelmä, joka toimii hyvin ja on jo tuttu JavaScript-kehittäjien ja JavaScript-kehysten, kuten esim. Next.js, jossa voit määrittää reittejä.

Expo-reitittimen asennus ja käyttöönotto

Expo-projektisi siirtäminen vanhasta navigointijärjestelmästä Expo-reitittimeen on melko helppoa.

Vaihe 1: Asenna Expo-reititin

Käytä tätä päätekomentoa suorittaaksesi expo-reitittimen asennusohjelman:

npx expo asenna expo-reititin

Sinun on myös varmistettava, että olet asentanut nämä vertaisriippuvuudet:

• reagoi-native-safe-area-context
• reagoivat alkuperäiset näytöt
• expo-linkittäminen
• expo-tilapalkki
• reagoi-alkuperäinen-ele-käsittelijä

Jos jokin puuttuu, voit asentaa ne suorittamalla:

npx expo asennus 

Vaihe 2: Päivitä aloituspiste

Luoda uusi index.js tiedosto korvataksesi olemassa olevan App.js sisääntulopiste ja aseta index.js sovelluksen sisääntulopisteenä sisällä app.json:

// Aseta index.js aloituspisteeksi
{
"pää": "index.js"
}
// Tuo seuraavat tiedostot index.js: n sisään
tuonti"expo-reititin/entry";

Expo Router käyttää a syvä linkki Järjestelmä määrittää, mikä näyttö tai sisältö avataan reititettäessä.

Määritä täsmälinkkimalli sovelluksellesi lisäämällä a järjestelmä omaisuutta app.json:

{
"expo": {
"suunnitelma": "omasovellus"
 }
}

Vaihe 4: Lopullinen konfigurointi

Viimeinen vaihe on määrittää Expo-sovelluksesi metropaketti ja määrittää Babel tukemaan Expo Routeria sovelluksessasi.

Sisällä babel.config.js muokkaa olemassa olevaa koodia tältä:

moduuli.vienti = toiminto (api) {
 api.cache(totta);
palata {
 esiasetukset: ["babel-preset-expo"],
 lisäosat: [
vaatia.ratkaista("expo-reititin/baabel"),
/* */
 ],
 };
};

Rakenna nyt uudelleen ja käynnistä sovellus suorittamalla:

npx expo -- selvä

Rakenna sovelluksesi reitit Expo Routerilla

Voit aloittaa navigointikulun määrittämisen sovellus kansio. The index.js tiedosto on lähtökohtasi. Expo Router lisää jokaisen sisällä luomasi tiedoston polun sovellus sovelluksen reittijärjestelmään URL-osoitteiden täsmälinkeillä, jotka vastaavat jokaista sivua.

Luo esimerkiksi a SecondScreen.js tiedosto sisällä sovellus hakemistoon ja vie oletuskomponentti:

tuonti { Tyylitaulukko, teksti, näkymä } alkaen"react-natiivi";
tuonti Reagoi alkaen"reagoi";
konst SecondScreen = () => {
palata (


Toinen näyttö</Text>
 </View>
 </View>
 );
};
viedäoletuksena SecondScreen;
konst tyylit = StyleSheet.create({});

Voit navigoida tälle näytölle osoitteesta index.js kanssa useRouter() menetelmä:

tuonti { käytä reititintä } alkaen"expo-reititin";
viedäoletuksenatoimintoSivu() {
konst navigointi = useRouter();
palata (

Hei maailma</Text>
Tämä on ensimmäinen sivu / sovelluksesi.</Text>
 otsikko="Navigoi SecondScreeniin"
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Täällä määrität reitittimen navigointiin ja käytät sitä Button-elementin sisällä soittamalla navigation.push("/sekunti"). Pushissa oleva argumentti on sen näytön tiedostopolku, johon haluat navigoida.

Sisällä SecondScreen voit myös navigoida hakemistonäyttöön seuraavasti:

tuonti { Linkki } alkaen"expo-reititin";
konst SecondScreen = () => {
palata (


Toinen näyttö</Text>
"/" lapsena>

Siirry kohtaan index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Linkkielementti määrittää polun href-propanin. Sovelluksen sisällä "/" polku vastaa syöttötiedostoa (index.js). Toinen rekvisiitta on asChild. Tämän ehdotuksen avulla voit renderöidä ensimmäisen alikomponentin kaikilla määritetyillä rekvisiitillä oletuslinkkikomponentin sijaan. Tämän avulla voit mukauttaa Link-komponentin ulkoasua tai toteuttaa mukautetun reitityslogiikan.

Dynaamisten reittien määrittäminen

Dynaamisilla reiteillä voit luoda reittejä dynaamisesti tiettyjen parametrien tai tietojen perusteella. Sen sijaan, että määrität kiinteitä reittejä, saat joustavuutta ja mukautumiskykyä sovelluksesi navigointiin.

Jotta voit aloittaa dynaamisten reittien käytön Expo Routerissa, sinun on määritettävä reitit dynaamisen sisällön käsittelemiseksi. Voit käyttää parametroituja reittejä määrittämällä paikkamerkit reitin polun sisällä. Näiden paikkamerkkien arvot ovat sitten saatavilla reitilläsi, kun joku navigoi sille.

Harkitse esimerkiksi blogisovellusta, jossa haluat näyttää yksittäisiä blogiviestejä. Voit määrittää dynaamisen reitin kunkin blogiviestin käsittelemiseksi:

// app/routes/BlogPost.js
tuonti Reagoi alkaen"reagoi";
tuonti { käytä reititintä } alkaen"expo-reititin";
konst Blogiviesti = ({ reitti }) => {
konst { postId } = reitti.params;
palata (

Näytetään blogiviesti kanssa Tunnus: {postId}</Text>
 </View>
 );
};
viedäoletuksena Blogipostaus;

Tässä esimerkissä määrität dynaamisen reittikomponentin nimeltä Blogipostaus. The route.params Objektin avulla voit käyttää reitille välitettyjä parametriarvoja. Tässä tapauksessa käytät a postId parametri näyttää vastaava blogikirjoitus.

Dynaamisten reittien luominen

Nyt kun olet määrittänyt dynaamisen reitin, voit luoda reittejä dynaamisesti tietojen tai käyttäjän syötteiden perusteella. Jos sinulla on esimerkiksi luettelo blogikirjoituksista, jotka on haettu API: sta, voit luoda dynaamisesti reittejä kullekin blogiviestille.

Tässä on esimerkki:

// app/components/BlogList.js
tuonti Reagoi alkaen"reagoi";
tuonti { useNavigation } alkaen"expo-reititin";
konst Blogilista = ({ blogikirjoitukset }) => {
konst navigointi = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogipostaus", { postId });
 };
palata (

 {blogPosts.map((lähettää) => (
 avain={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
viedäoletuksena Blogilista;

Tässä esimerkissä toistat yli blogiviestit array ja renderöi a komponentti jokaiselle viestille. Kun painat viestiä, navigateToBlogPost toiminto suoritetaan ohittaen postId navigointireitille.

Dynaamisten reittien käsittely

Voit kuunnella dynaamiseen reittiin liittyviä navigointitapahtumia käyttämällä käytä FocusEffectiä koukku.

Esimerkiksi:

// app/routes/BlogPost.js
tuonti Reagoi alkaen"reagoi";
tuonti { Route, useFocusEffect } alkaen"expo-reititin";
konst Blogiviesti = ({ reitti }) => {
konst { postId } = reitti.params;
 useFocusEffect(() => {
// Hae blogitekstitiedot postId: n perusteella
// Suorita muut tarvittavat toimenpiteet kohdistettaessa
 });
palata (

Näytetään blogiviesti kanssa Tunnus: {postId}</Text>
 </View>
 );
};
viedäoletuksena Blogipostaus;

Tässä esimerkissä käytä FocusEffectiä koukku kuuntelee kohdekohtaisia ​​tapahtumia Blogipostaus komponentti. Takaisinsoiton sisällä voit hakea lisätietoja, suorittaa toimintoja tai päivittää näyttöä kohdistetun blogikirjoituksen perusteella.

Navigointi dynaamisilla reiteillä

Voit navigoida dynaamiselle reitille Expo Routerin tarjoamilla navigointimenetelmillä.

Esimerkiksi navigoidaksesi kohteeseen Blogipostaus komponentti tietyllä postId, voit käyttää navigation.navigate menetelmä:

// app/components/BlogList.js
tuonti Reagoi alkaen"reagoi";
tuonti { useNavigation } alkaen"expo-reititin";
konst Blogilista = ({ blogikirjoitukset }) => {
konst navigointi = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Blogipostaus", { postId });
 };
palata (

 {blogPosts.map((lähettää) => (
 avain={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
viedäoletuksena Blogilista;

Kun painat blogitekstiä, navigateToBlogPost toiminto käynnistyy kanssa postId.

Expo Router auttaa sinua jäsentämään alkuperäisiä sovelluksiasi

Expo Router tarjoaa erinomaisen ratkaisun navigoinnin hallintaan React Native -sovelluksissa. Kuvittelemalla uudelleen alkuperäisen reitityskokemuksen, Expo Router tarjoaa joustavuutta ja helppokäyttöisyyttä.

Olet tutkinut Expo Routerin ominaisuuksia, syventynyt perusreitityskonsepteihin ja löytänyt dynaamisten reittien rakentamisen. Expo Routerin avulla voit luoda dynaamisia navigointivirtoja, käsitellä vaihtelevia tietoja tai käyttäjän syötteitä ja mukauttaa navigointia sovelluksessasi.