Natiivne marsruutimine on uuesti välja töötatud Expo ruuteriga

Failipõhine marsruutimine on levinud veebiarendustehnika, mis kaardistab URL-i tee konkreetse failiga projekti kataloogis. See süsteem väldib keerukaid marsruutimise konfiguratsioone, mis on seotud navigatsioonisüsteemide ehitamisega.

Expo Routeri teegi väljalaskmisega on React Native rakendustega võimalik failipõhine marsruutimine. Expo Router võiks olla parem navigeerimissüsteem React Native'i arendajatele, kes töötavad Expoga.

Expo ruuteriga uuendatud navigeerimine

Expo ruuter pakub React Native Expo rakenduste jaoks deklaratiivset marsruutimislahendust. See süsteem erineb oluliselt teie süsteemist luua navigatsioonisüsteem React Navigationi abil. Expo Router tekitab suuri probleeme praeguse töötava navigatsioonisüsteemi kasutamisega.

Nende probleemide hulka kuuluvad navigeerimissüsteem, mis ei tööta kõikjal järjepidevalt, raskused sügava linkimise haldamisel ja ka kohandatud navigeerimise üleminekute keerukad seadistused.

Expo ruuteri failipõhine navigeerimine/marsruutimine on lihtne süsteem, mis töötab hästi ja on juba tuttav JavaScripti arendajatele ja JavaScripti raamistikele nagu Next.js, kus saate marsruute määratleda.

Expo ruuteri installimine ja seadistamine

Expo projekti üleviimine vanast navigatsioonisüsteemist Expo ruuterile on üsna lihtne.

1. samm: installige Expo ruuter

Kasutage seda terminali käsku, et käivitada expo-ruuteri installiprogramm:

npx expo installige expo-ruuter

Samuti peate veenduma, et olete installinud järgmised vastastikused sõltuvused:

• reageerima-native-safe-area-context
• react-native-screens
• ekspo-linkimine
• Expo-olekuriba
• reageerima-native-žestikäsitleja

Kui mõni neist puudub, saate need installida, käivitades:

npx expo installimine 

2. samm: värskendage sisenemispunkti

Loo uus index.js fail olemasoleva asendamiseks App.js sisenemispunkt ja määrake index.js kui rakenduse sisestuspunkt app.json:

// Määra sisestuspunktiks index.js
{
"peamine": "index.js"
}
// Importige järgmine fail index.js-i
importida"expo-ruuter/entry";

Expo Router kasutab a sügav link skeem, et määrata, milline ekraan või sisu marsruutimisel avada.

Määrake oma rakenduse jaoks sügav linkimisskeem, lisades a skeem vara juurde app.json:

{
"näitus": {
"skeem": "minu rakendus"
 }
}

4. samm: lõplik konfigureerimine

Viimane samm on Expo rakenduse metrookomplekti seadistamine ja Babeli konfigureerimine teie rakenduses Expo Routeri toetamiseks.

Sees babel.config.js muutke olemasolevat koodi selliseks:

moodul.eksport = funktsiooni (api) {
 api.cache(tõsi);
tagasi {
 eelseaded: ["baabel-preset-expo"],
 pluginad: [
nõuda.resolve("expo-ruuter/baabel"),
/* */
 ],
 };
};

Nüüd looge rakendus uuesti ja käivitage, käivitades:

npx expo -- selge

Rakenduse marsruutide koostamine Expo Routeri abil

Saate alustada navigeerimisvoo seadistamist rakenduses rakendus kausta. The index.js fail on teie lähtepunkt. Expo Router lisab iga teie loodud faili tee rakendus rakenduse marsruudisüsteemile URL-i sügavate linkidega, mis vastavad igale lehele.

Näiteks looge a SecondScreen.js faili sees rakendus kataloogi ja eksportige vaikekomponent:

importida { Style Sheet, Text, View } alates"reageer-native";
importida Reageerige alates"reageerida";
konst SecondScreen = () => {
tagasi (


Teine ekraan</Text>
 </View>
 </View>
 );
};
eksportidavaikimisi SecondScreen;
konst stiilid = StyleSheet.create({});

Sellele ekraanile saate navigeerida aadressilt index.js koos useRouter() meetod:

importida { useRouter } alates"expo-ruuter";
eksportidavaikimisifunktsiooniLehekülg() {
konst navigeerimine = useRouter();
tagasi (

Tere maailm</Text>
See on esimene leht kohta teie rakendus.</Text>
 pealkiri="Navigeerige SecondScreenile"
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Siin määrate ruuteri navigeerimisele ja kasutate seda elemendi Button sees helistades navigation.push("/sekund"). Tõuke argument on selle ekraani failitee, kuhu soovite navigeerida.

Sees SecondScreen võite navigeerida registrikuvale ka järgmiselt:

importida { Link } alates"expo-ruuter";
konst SecondScreen = () => {
tagasi (


Teine ekraan</Text>
"/" kui laps>

Liikuge saidile index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Lingi element kasutab tee määramiseks href propi. Rakenduse sees "/" tee vastab sisestusfailile (index.js). Teine rekvisiit on asChild. See tugi võimaldab teil vaikelingi komponendi asemel renderdada esimese alamkomponendi koos kõigi määratud rekvisiitidega. Saate seda kasutada komponendi Link välimuse kohandamiseks või kohandatud marsruutimisloogika rakendamiseks.

Dünaamiliste marsruutide määratlemine

Dünaamiliste marsruutide abil saate teatud parameetrite või andmete alusel dünaamiliselt luua marsruute. Selle asemel, et määrata kindlaks määratud marsruutide komplekt, saate oma rakenduse navigeerimises paindlikumaks ja kohandatavamaks.

Expo Routeris dünaamiliste marsruutide kasutamise alustamiseks peate määratlema marsruudid dünaamilise sisu haldamiseks. Saate kasutada parameetritega marsruute, määrates marsruudi teele kohahoidjad. Nende kohatäidete väärtused on seejärel teie marsruudi jaoks saadaval, kui keegi sellele navigeerib.

Näiteks kaaluge ajaveebirakendust, kus soovite kuvada üksikuid ajaveebi postitusi. Saate määratleda dünaamilise marsruudi iga ajaveebipostituse käsitlemiseks:

// app/routes/BlogPost.js
importida Reageerige alates"reageerida";
importida { useRouter } alates"expo-ruuter";
konst Blogipostitus = ({ tee }) => {
konst { postId } = route.params;
tagasi (

Blogipostituse kuvamine koos ID: {postId}</Text>
 </View>
 );
};
eksportidavaikimisi BlogPost;

Selles näites määratlete dünaamilise marsruudi komponendi nimega Blogipostitus. The marsruut.params objekt võimaldab juurdepääsu marsruudile edastatud parameetri väärtustele. Sel juhul pääsete juurde a posti ID vastava ajaveebi postituse kuvamiseks.

Dünaamiliste marsruutide loomine

Nüüd, kui teil on dünaamiline marsruut määratletud, saate andmete või kasutaja sisendi põhjal dünaamiliselt marsruute genereerida. Näiteks kui teil on API-lt toodud ajaveebipostituste loend, saate iga ajaveebi postituse jaoks dünaamiliselt marsruute luua.

Siin on näide:

// app/components/BlogList.js
importida Reageerige alates"reageerida";
importida { useNavigation } alates"expo-ruuter";
konst BlogList = ({ blogipostitused }) => {
konst navigation = useNavigation();
konst navigateToBlogPost = (posti ID) => {
 navigation.navigate("Blogipostitus", { postId });
 };
tagasi (

 {blogPosts.map((postitus) => (
 võti={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportidavaikimisi BlogList;

Selles näites kordate üle ajaveebipostitused massiiv ja renderda a komponent iga postituse jaoks. Kui vajutate postitusele, navigateToBlogPost funktsioon töötab, möödudes posti ID navigatsioonimarsruudile.

Dünaamiliste marsruutide haldamine

Saate kuulata dünaamilise marsruudiga seotud navigeerimissündmusi, kasutades nuppu useFocusEffect konks.

Näiteks:

// app/routes/BlogPost.js
importida Reageerige alates"reageerida";
importida { Route, useFocusEffect } alates"expo-ruuter";
konst Blogipostitus = ({ tee }) => {
konst { postId } = route.params;
 useFocusEffect(() => {
// Ajaveebipostituse andmete toomine postId põhjal
// Tehke fookuses kõik muud vajalikud toimingud
 });
tagasi (

Blogipostituse kuvamine koos ID: {postId}</Text>
 </View>
 );
};
eksportidavaikimisi BlogPost;

Selles näites on useFocusEffect konks kuulab konkreetseid fookussündmusi Blogipostitus komponent. Tagasihelistamise sees saate fookustatud ajaveebipostituse põhjal tuua lisaandmeid, teha toiminguid või värskendada ekraani.

Navigeerimine dünaamiliste marsruutidega

Dünaamilisele marsruudile navigeerimiseks võite kasutada Expo Routeri pakutavaid navigeerimismeetodeid.

Näiteks navigeerimiseks Blogipostitus komponent konkreetsega posti ID, saate kasutada navigation.navigate meetod:

// app/components/BlogList.js
importida Reageerige alates"reageerida";
importida { useNavigation } alates"expo-ruuter";
konst BlogList = ({ blogipostitused }) => {
konst navigation = useNavigation();
konst navigateToBlogPost = (posti ID) => {
 navigation.navigate("Blogipostitus", { postId });
 };
tagasi (

 {blogPosts.map((postitus) => (
 võti={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportidavaikimisi BlogList;

Kui vajutate ajaveebi postitusele, kuvatakse navigateToBlogPost funktsioon käivitub koos posti ID.

Expo ruuter aitab teil oma kohalikke rakendusi struktureerida

Expo ruuter pakub suurepärast lahendust React Native'i rakendustes navigeerimise haldamiseks. Kujutades uuesti ette natiivse marsruutimise kogemuse, pakub Expo Router paindlikkust ja kasutuslihtsust.

Olete uurinud Expo Routeri funktsioone, süvenenud marsruutimise põhikontseptsioonidesse ja avastanud, kuidas luua dünaamilisi marsruute. Expo Routeri abil saate luua dünaamilisi navigeerimisvooge, käsitleda erinevaid andmeid või kasutaja sisestusi ning isikupärastada oma rakenduses navigeerimist.