Iztīriet savus URL maršrutus pat mobilajās lietotnēs, izmantojot Expo Router bibliotēku.

Uz failiem balstīta maršrutēšana ir izplatīta tīmekļa izstrādes metode, kas kartē URL ceļu uz konkrētu failu projekta direktorijā. Šī sistēma ļauj izvairīties no sarežģītām maršrutēšanas konfigurācijām, kas saistītas ar navigācijas sistēmu būvniecību.

Līdz ar Expo Router bibliotēkas izlaišanu uz failiem balstīta maršrutēšana ir iespējama ar React Native lietojumprogrammām. Expo Router varētu būt labāka navigācijas sistēma React Native izstrādātājiem, kas strādā ar Expo.

Navigācija pārdomāta ar Expo Router

Expo maršrutētājs nodrošina deklaratīvu maršrutēšanas risinājumu React Native Expo lietotnēm. Šī sistēma ievērojami atšķiras no jūsu sistēmas izveidot navigācijas sistēmu, izmantojot React Navigation. Expo Router rada lielas bažas par pašreizējās darba navigācijas sistēmas izmantošanu.

Šīs problēmas ietver navigācijas sistēmu, kas nedarbojas vienmērīgi visur, grūtības pārvaldīt dziļo saiti, kā arī sarežģītus iestatījumus pielāgotām navigācijas pārejām.

instagram viewer

Expo maršrutētāja faila navigācija/maršrutēšana ir vienkārša sistēma, kas darbojas labi un ir jau pazīstama JavaScript izstrādātājiem un JavaScript ietvariem, piemēram, Next.js, kur var definēt maršrutus.

Expo maršrutētāja instalēšana un iestatīšana

Ir diezgan vienkārši migrēt savu Expo projektu no vecās navigācijas sistēmas uz Expo maršrutētāja izmantošanu.

1. darbība: instalējiet Expo maršrutētāju

Izmantojiet šo termināļa komandu, lai palaistu expo-router instalētāju:

npx expo instalējiet expo maršrutētāju

Jums būs arī jāpārliecinās, ka esat instalējis šīs vienaudžu atkarības:

  • reaģēt-native-safe-area-context
  • reaģēt-native-screens
  • ekspo saistīšana
  • izstādes statusa josla
  • reaģēt-native-žestu apstrādātājs

Ja kāda trūkst, varat tos instalēt, izpildot:

npx expo instalēšana

2. darbība: atjauniniet ieejas punktu

Izveidojiet jaunu index.js failu, lai aizstātu esošo App.js ieejas punktu un iestatiet index.js kā lietotnes ieejas punkts iekšpusē app.json:

// Iestatīt index.js kā ievades punktu
{
"galvenais": "index.js"
}
// Importējiet tālāk norādīto failu index.js
imports"ekspo-maršrutētājs/ieeja";

Expo Router izmanto a dziļā saite shēma, lai noteiktu, kuru ekrānu vai saturu atvērt maršrutēšanas laikā.

Definējiet savai lietotnei dziļās saites shēmu, pievienojot a shēma īpašumu uz app.json:

{
"ekspozīcija": {
"shēma": "mana lietotne"
 }
}

4. darbība: galīgā konfigurācija

Pēdējā darbība ir Expo lietotnes metro grupēšanas iestatīšana un Babel konfigurēšana, lai jūsu lietotnē atbalstītu Expo Router.

Iekšā babel.config.js modificējiet esošo kodu, lai tas izskatītos šādi:

modulis.eksports = funkciju (api) {
 api.cache(taisnība);
atgriezties {
 sākotnējie iestatījumi: ["babel-preset-expo"],
 spraudņi: [
pieprasīt.resolve("expo-router/babel"),
/* */
 ],
 };
};

Tagad atjaunojiet un sāciet lietotni, palaižot:

npx expo -- skaidrs
2 attēli

Izveidojiet savas lietotnes maršrutus, izmantojot Expo Router

Varat sākt iestatīt navigācijas plūsmu lietotne mapi. The index.js fails ir jūsu sākumpunkts. Expo Router pievieno katra jūsu izveidotā faila ceļu lietotne lietotnes maršrutu sistēmai ar URL dziļajām saitēm, kas atbilst katrai lapai.

Piemēram, izveidojiet a SecondScreen.js failu iekšpusē lietotne direktorijā un eksportēt noklusējuma komponentu:

imports { Stila lapa, teksts, skats } no"reaģēt-native";
imports Reaģēt no"reaģēt";
konst SecondScreen = () => {
atgriezties (


Otrais ekrāns</Text>
 </View>
 </View>
 );
};


eksportētnoklusējuma SecondScreen;
konst stili = StyleSheet.create({});

Jūs varētu pāriet uz šo ekrānu no index.js Ar useRouter() metode:

imports { useRouter } no"ekspozīcijas maršrutētājs";
eksportētnoklusējumafunkcijuLappuse() {
konst navigācija = useRouter();


atgriezties (

Sveika pasaule</Text>
Šī ir pirmā lapa no jūsu lietotne.</Text>
 virsraksts="Pāriet uz SecondScreen"
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Šeit jūs piešķirat maršrutētāju navigācijai un izmantojiet to elementā Button, zvanot navigation.push("/sekunde"). Arguments programmā push ir tā ekrāna faila ceļš, uz kuru vēlaties pāriet.

Iekšā SecondScreen varat arī pāriet uz rādītāja ekrānu šādi:

imports { Saite } no"ekspozīcijas maršrutētājs";
konst SecondScreen = () => {
atgriezties (


Otrais ekrāns</Text>
"/" kā bērns>

Dodieties uz index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Saites elements izmanto href prop, lai norādītu ceļu. Lietotnes iekšpusē "/" ceļš atbilst ievades failam (index.js). Otrais rekvizīts ir asChild. Šis atbalsts ļauj renderēt pirmo pakārtoto komponentu ar visiem norādītajiem rekvizītiem, nevis noklusējuma saites komponentu. Varat to izmantot, lai pielāgotu komponenta Saite izskatu vai ieviestu pielāgotu maršrutēšanas loģiku.

Dinamisku maršrutu noteikšana

Izmantojot dinamiskos maršrutus, varat dinamiski ģenerēt maršrutus, pamatojoties uz noteiktiem parametriem vai datiem. Tā vietā, lai definētu fiksētu maršrutu kopu, jūs iegūstat elastību un pielāgojamību savas lietotnes navigācijā.

Lai programmā Expo Router sāktu izmantot dinamiskos maršrutus, jums ir jādefinē maršruti dinamiskā satura apstrādei. Varat izmantot parametrizētus maršrutus, maršruta ceļā norādot vietturus. Pēc tam šo vietturu vērtības būs pieejamas jūsu maršrutam, kad kāds uz to navigēs.

Piemēram, apsveriet iespēju izveidot emuāru rakstīšanas lietotni, kurā vēlaties parādīt atsevišķus emuāra ierakstus. Varat definēt dinamisku maršrutu, lai apstrādātu katru emuāra ziņojumu:

// app/routes/BlogPost.js
imports Reaģēt no"reaģēt";
imports { useRouter } no"ekspozīcijas maršrutētājs";
konst BlogPost = ({ maršruts }) => {
konst { postId } = route.params;


atgriezties (

Tiek rādīts emuāra ziņojums ar ID: {postId}</Text>
 </View>
 );
};
eksportētnoklusējuma BlogPost;

Šajā piemērā jūs definējat dinamiska maršruta komponentu ar nosaukumu BlogPost. The maršruts.params objekts ļauj piekļūt maršrutam nodotajām parametru vērtībām. Šajā gadījumā jūs piekļūstat a postId parametrs, lai parādītu atbilstošo emuāra ziņu.

Dinamisku maršrutu ģenerēšana

Tagad, kad ir definēts dinamisks maršruts, varat dinamiski ģenerēt maršrutus, pamatojoties uz datiem vai lietotāja ievadi. Piemēram, ja jums ir emuāra ziņu saraksts, kas iegūts no API, varat dinamiski ģenerēt maršrutus katram emuāra ierakstam.

Šeit ir piemērs:

// app/components/BlogList.js
imports Reaģēt no"reaģēt";
imports { useNavigation } no"ekspozīcijas maršrutētājs";
konst BlogList = ({ emuāra ziņas }) => {
konst navigācija = useNavigation();


konst navigateToBlogPost = (postId) => {
 navigation.navigate("emuāra ziņojums", {postId});
 };


atgriezties (

 {blogPosts.map((pastu) => (
 atslēga={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportētnoklusējuma BlogList;

Šajā piemērā jūs atkārtojat pāri emuāra ziņas masīvs un renderēt a komponents katram amatam. Nospiežot ziņu, navigateToBlogPost funkcija darbojas, nokārtojot postId uz navigācijas maršrutu.

Dinamisko maršrutu apstrāde

Varat klausīties navigācijas notikumus, kas raksturīgi dinamiskam maršrutam, izmantojot useFocusEffect āķis.

Piemēram:

// app/routes/BlogPost.js
imports Reaģēt no"reaģēt";
imports { Route, useFocusEffect } no"ekspozīcijas maršrutētājs";
konst BlogPost = ({ maršruts }) => {
konst { postId } = route.params;


 useFocusEffect(() => {
// Iegūstiet emuāra ziņas datus, pamatojoties uz postId
// Fokusā veiciet visas citas nepieciešamās darbības
 });


atgriezties (

Tiek rādīts emuāra ziņojums ar ID: {postId}</Text>
 </View>
 );
};
eksportētnoklusējuma BlogPost;

Šajā piemērā useFocusEffect āķis klausās fokusa notikumus, kas raksturīgi šim BlogPost komponents. Atzvanīšanas laikā varat iegūt papildu datus, veikt darbības vai atjaunināt ekrānu, pamatojoties uz fokusēto emuāra ziņu.

Navigācija, izmantojot dinamiskos maršrutus

Lai pārvietotos uz dinamisku maršrutu, varat izmantot Expo Router nodrošinātās navigācijas metodes.

Piemēram, lai pārvietotos uz BlogPost komponents ar konkrētu postId, varat izmantot navigācija.navigēt metode:

// app/components/BlogList.js
imports Reaģēt no"reaģēt";
imports { useNavigation } no"ekspozīcijas maršrutētājs";
konst BlogList = ({ emuāra ziņas }) => {
konst navigācija = useNavigation();


konst navigateToBlogPost = (postId) => {
 navigation.navigate("emuāra ziņojums", {postId});
 };


atgriezties (

 {blogPosts.map((pastu) => (
 atslēga={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportētnoklusējuma BlogList;

Nospiežot emuāra ziņu, navigateToBlogPost funkcija tiks aktivizēta ar postId.

Expo maršrutētājs palīdz strukturēt vietējās lietotnes

Expo Router nodrošina lielisku risinājumu navigācijas pārvaldībai jūsu React Native lietotnēs. Pārdomājot vietējo maršrutēšanas pieredzi, Expo Router piedāvā elastību un ērtu lietošanu.

Jūs esat izpētījis Expo Router funkcijas, iedziļinājies maršrutēšanas pamatkoncepcijās un atklājis, kā izveidot dinamiskus maršrutus. Izmantojot Expo Router, varat izveidot dinamiskas navigācijas plūsmas, apstrādāt dažādus datus vai lietotāja ievadi un personalizēt navigāciju savā lietotnē.