Vietinis maršrutas pergalvotas naudojant „Expo Router“.

Failų nukreipimas yra įprasta žiniatinklio kūrimo technika, kuri susieja URL kelią į konkretų failą projekto kataloge. Ši sistema leidžia išvengti sudėtingų maršruto konfigūracijų, susijusių su pastato navigacijos sistemomis.

Išleidus „Expo Router“ biblioteką, naudojant „React Native“ programas galimas maršrutas failais. „Expo Router“ galėtų būti geresnė „React Native“ kūrėjų, dirbančių su „Expo“, navigacijos sistema.

Navigacija pergalvota naudojant „Expo Router“.

„Expo“ maršrutizatorius teikia deklaratyvų maršruto parinkimo sprendimą „React Native Expo“ programoms. Ši sistema labai skiriasi nuo jūsų sukurti navigacijos sistemą naudodami „React Navigation“.. „Expo Router“ kelia didelį susirūpinimą dėl esamos veikiančios navigacijos sistemos naudojimo.

Šios problemos apima ne visur nuosekliai veikiančią navigacijos sistemą, giliųjų nuorodų valdymo sunkumus ir sudėtingas pasirinktinių navigacijos perėjimų sąrankas.

Expo maršrutizatoriaus failais pagrįsta navigacija / maršruto parinkimas yra paprasta sistema, kuri gerai veikia ir jau pažįstama „JavaScript“ kūrėjams ir „JavaScript“ sistemoms, pvz., Next.js, kur galite apibrėžti maršrutus.

„Expo Router“ diegimas ir nustatymas

Gana paprasta perkelti savo Expo projektą iš senos navigacijos sistemos į naudojant Expo maršrutizatorių.

1 veiksmas: įdiekite „Expo Router“.

Norėdami paleisti „expo-router“ diegimo programą, naudokite šią terminalo komandą:

npx expo įdiegti expo maršrutizatorių

Taip pat turėsite įsitikinti, kad įdiegėte šias lygiavertes priklausomybes:

• react-native-saugios zonos-kontekstas
• react-native-screens
• parodos susiejimas
• parodos būsenos juosta
• reaguoti-gimtoji-gestų tvarkytojas

Jei jų trūksta, galite juos įdiegti paleisdami:

npx expo diegimas 

2 veiksmas: atnaujinkite įėjimo tašką

Sukurti naują index.js failą, kad pakeistumėte esamą App.js įėjimo tašką ir nustatykite index.js kaip programos įėjimo taškas viduje app.json:

// Nustatyti index.js kaip įėjimo tašką
{
"pagrindinis": "index.js"
}
// Importuokite toliau nurodytą failą į index.js
importuoti"expo-router/entry";

„Expo Router“ naudoja a gilioji nuoroda schema, skirta nustatyti, kurį ekraną ar turinį atidaryti nukreipiant.

Apibrėžkite programos giliųjų nuorodų schemą pridėdami a schema nuosavybė į app.json:

{
"expo": {
"schema": "mano programa"
 }
}

4 veiksmas: galutinė konfigūracija

Paskutinis veiksmas yra nustatyti „Expo“ programos metro rinktuvą ir sukonfigūruoti „Babel“, kad jūsų programoje būtų palaikomas „Expo Router“.

Viduje babel.config.js pakeiskite esamą kodą, kad atrodytų taip:

modulis.eksportas = funkcija (api) {
 api.cache(tiesa);
grąžinti {
 išankstiniai nustatymai: ["Babel-preset-expo"],
 papildiniai: [
reikalauti.resolve(„expo-router/babel“),
/* */
 ],
 };
};

Dabar iš naujo sukurkite ir paleiskite programą paleisdami:

npx expo – aišku

Kurkite savo programos maršrutus naudodami „Expo Router“.

Galite pradėti nustatyti naršymo srautą programėlė aplanką. The index.js failas yra jūsų pradžios taškas. „Expo Router“ prideda kiekvieno sukurto failo kelią programėlė į programos maršruto sistemą su URL giliosiomis nuorodomis, atitinkančiomis kiekvieną puslapį.

Pavyzdžiui, sukurkite a SecondScreen.js failas viduje programėlė katalogą ir eksportuoti numatytąjį komponentą:

importuoti { Stiliaus lapas, tekstas, rodinys } iš"reaguoja - gimtoji";
importuoti Reaguoti iš"reaguoti";
konst SecondScreen = () => {
grąžinti (


Antrasis ekranas</Text>
 </View>
 </View>
 );
};
eksportuotinumatytas SecondScreen;
konst stiliai = StyleSheet.create({});

Galite pereiti į šį ekraną iš index.js su useRouter() metodas:

importuoti { useRouter } iš"Expo-maršrutizatorius";
eksportuotinumatytasfunkcijaPuslapis() {
konst navigacija = useRouter();
grąžinti (

Sveikas pasauli</Text>
Tai pirmasis puslapis apie jūsų programa.</Text>
 pavadinimas =„Navigate to SecondScreen“
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Čia galite priskirti maršrutizatorių navigacijai ir naudoti jį mygtuko elemento viduje skambindami navigation.push("/sekundė"). Argumentas „push“ yra ekrano, į kurį norite pereiti, failo kelias.

Viduje Antrasis ekranas taip pat galite pereiti į rodyklės ekraną taip:

importuoti { Nuoroda } iš"Expo-maršrutizatorius";
konst SecondScreen = () => {
grąžinti (


Antrasis ekranas</Text>
"/" kaip vaikas>

Eikite į index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Nuorodos elementas naudoja „href“ pasiūlymą, kad nurodytų kelią. Programos viduje, "/" kelias atitinka įvesties failą (index.js). Antrasis rekvizitas yra asChild. Šis rekvizitas leidžia pateikti pirmąjį antrinį komponentą su visais nurodytais rekvizitais, o ne numatytuoju nuorodos komponentu. Tai galite naudoti norėdami tinkinti nuorodos komponento išvaizdą arba įdiegti pasirinktinę maršruto parinkimo logiką.

Dinaminių maršrutų apibrėžimas

Naudodami Dinaminius maršrutus galite dinamiškai generuoti maršrutus pagal tam tikrus parametrus ar duomenis. Užuot apibrėžę fiksuotą maršrutų rinkinį, įgyjate lankstumo ir prisitaikymo prie programos navigacijos.

Norėdami pradėti naudoti dinaminius maršrutus programoje Expo Router, turite apibrėžti dinaminio turinio tvarkymo maršrutus. Galite naudoti parametruotus maršrutus, nurodydami vietos rezervavimo ženklus maršruto kelyje. Šių rezervuotų vietų reikšmės bus pasiekiamos jūsų maršrutui, kai kas nors į jį nukeliaus.

Pavyzdžiui, apsvarstykite tinklaraščių programą, kurioje norite rodyti atskirus tinklaraščio įrašus. Galite apibrėžti dinamišką maršrutą kiekvienam tinklaraščio įrašui tvarkyti:

// app/routes/BlogPost.js
importuoti Reaguoti iš"reaguoti";
importuoti { useRouter } iš"Expo-maršrutizatorius";
konst Tinklaraščio įrašas = ({ maršrutas }) => {
konst { postId } = route.params;
grąžinti (

Rodomas tinklaraščio įrašas su ID: {postId}</Text>
 </View>
 );
};
eksportuotinumatytas Tinklaraščio straipsnis;

Šiame pavyzdyje apibrėžiate dinaminį maršruto komponentą pavadinimu Tinklaraščio straipsnis. The maršrutas.params objektas leidžia pasiekti maršrutui perduotas parametrų reikšmes. Tokiu atveju jūs pasiekiate a postId parametrą, kad būtų rodomas atitinkamas tinklaraščio įrašas.

Dinaminių maršrutų generavimas

Dabar, kai nustatėte dinaminį maršrutą, galite dinamiškai generuoti maršrutus pagal duomenis arba vartotojo įvestį. Pavyzdžiui, jei turite tinklaraščio įrašų, gautų iš API, sąrašą, galite dinamiškai generuoti kiekvieno tinklaraščio įrašo maršrutus.

Štai pavyzdys:

// app/components/BlogList.js
importuoti Reaguoti iš"reaguoti";
importuoti { useNavigation } iš"Expo-maršrutizatorius";
konst BlogList = ({ dienoraščio įrašai }) => {
konst navigacija = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Tinklaraščio straipsnis", { postId });
 };
grąžinti (

 {blogPosts.map((paštu) => (
 raktas={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportuotinumatytas BlogList;

Šiame pavyzdyje kartojate per dienoraščio įrašai masyvą ir atvaizduokite a komponentas kiekvienam įrašui. Kai paspausite įrašą, navigateToBlogPost funkcija veikia, praeinant postId iki navigacijos maršruto.

Dinaminių maršrutų valdymas

Galite klausytis navigacijos įvykių, susijusių su dinamišku maršrutu, naudodami useFocusEffect kabliukas.

Pavyzdžiui:

// app/routes/BlogPost.js
importuoti Reaguoti iš"reaguoti";
importuoti { Route, useFocusEffect } iš"Expo-maršrutizatorius";
konst Tinklaraščio įrašas = ({ maršrutas }) => {
konst { postId } = route.params;
 useFocusEffect(() => {
// Gaukite tinklaraščio įrašo duomenis pagal postId
// Atlikite visus kitus būtinus veiksmus sutelkę dėmesį
 });
grąžinti (

Rodomas tinklaraščio įrašas su ID: {postId}</Text>
 </View>
 );
};
eksportuotinumatytas Tinklaraščio straipsnis;

Šiame pavyzdyje useFocusEffect kablys klausosi, ar nėra konkrečių dėmesio įvykių Tinklaraščio straipsnis komponentas. Atgalinio skambučio metu galite gauti papildomų duomenų, atlikti veiksmus arba atnaujinti ekraną pagal paryškintą tinklaraščio įrašą.

Navigacija naudojant dinaminius maršrutus

Norėdami naviguoti į dinaminį maršrutą, galite naudoti Expo Router teikiamus navigacijos metodus.

Pavyzdžiui, norėdami pereiti prie Tinklaraščio straipsnis komponentas su konkrečiu postId, galite naudoti navigacija.naviguoti metodas:

// app/components/BlogList.js
importuoti Reaguoti iš"reaguoti";
importuoti { useNavigation } iš"Expo-maršrutizatorius";
konst BlogList = ({ dienoraščio įrašai }) => {
konst navigacija = useNavigation();
konst navigateToBlogPost = (postId) => {
 navigation.navigate("Tinklaraščio straipsnis", { postId });
 };
grąžinti (

 {blogPosts.map((paštu) => (
 raktas={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
eksportuotinumatytas BlogList;

Kai paspausite tinklaraščio įrašą, navigateToBlogPost funkcija įsijungs su postId.

„Expo Router“ padeda struktūrizuoti vietines programas

„Expo Router“ yra puikus sprendimas valdyti navigaciją „React Native“ programose. Iš naujo įsivaizduodamas vietinę maršruto parinkimo patirtį, „Expo Router“ siūlo lankstumą ir paprastą naudojimą.

Ištyrėte „Expo Router“ funkcijas, įsigilinote į pagrindines maršruto parinkimo koncepcijas ir sužinojote, kaip sukurti dinamiškus maršrutus. Naudodami „Expo Router“ galite kurti dinaminius naršymo srautus, tvarkyti įvairius duomenis ar vartotojo įvestį ir pritaikyti naršymą savo programoje.