Kuidas luua React Navigationiga mobiilne navigatsioonisüsteem

Mobiilirakendustel peaks olema navigatsioonisüsteem, mis juhib kasutajaid hõlpsalt läbi erinevate ekraanide ja funktsioonide.

React Navigation, React Native'i võimas ja paindlik navigeerimisteek, aitab teil seda kogemust luua. Selle võimalusi rakendades saate hõlpsalt luua suurepärase mobiilse navigatsioonisüsteemi.

React Navigation Library installimine

React Navigation pakub navigeerimissüsteemi loomiseks kolme peamist navigeerimismustrit, nimelt virna, vahekaardi ja sahtli navigeerimist. Need navigeerimismustrid pakuvad raamistikku teie rakenduse erinevate ekraanide vahel navigeerimise korraldamiseks ja haldamiseks.

React Navigationi kasutamise alustamiseks installige teek ja selle vajalikud sõltuvused:

npm install @react-navigation/native
npm install react-native-screens react-native-safe-area-context

Navigaatori seadistamine

Iga React Navigationi navigaator elab oma eraldi teegis. Mis tahes navigaatori kasutamiseks peate need eraldi installima.

Läbimõeldud projekti struktuur on kasulik mobiilirakenduse navigatsioonisüsteemi ehitamisel. Hea tava on luua an src kausta oma projekti juurkataloogis. Selles kaustas peaks teil olema a ekraanid kausta. See eraldab teie ekraani komponendid teistest komponentidest.

Kirjutate välja koodi, et seadistada oma projektis kasutatav navigeerimismuster App.js faili.

Navigaatori loomine sees App.js fail on parim tava mitmel põhjusel.

• The App.js fail on tavaliselt React Native'i rakenduse ülataseme komponent. Navigaatori määratlemine selles failis tagab, et navigeerimishierarhia on teie komponendipuu kõrgeimal tasemel ja kogu ulatuses juurdepääsetav.
• Navigaatori asetamine seadmesse App.js fail võimaldab hõlpsasti juurde pääseda kogu rakenduse olekule ja rekvisiitidele ning neid navigaatori ekraanidele edastada.
• Reageerida navigatsioonile Navigatsioonikonteiner pakub navigeerimiseks vajalikku konteksti ja asub tavaliselt sees App.js. Kui asetate Navigaatori samasse faili, saate selle hõlpsasti integreerida Navigatsioonikonteiner.

Stack Navigator

Stack Navigator on React Navigation teegis kõige populaarsem navigeerimismuster. See kasutab virna andmestruktuuri, kus iga ekraan on täiesti erinev komponent ja on virnastatud eelmise peale.

Kui virna peale lükatakse uus ekraan, muutub see aktiivseks ekraaniks ja eelmine ekraan visatakse selle alla. See võimaldab kasutajatel virnas edasi-tagasi liikuda, nagu veebisaidi navigeerimisvoos. Sa saad seadistage virnavigaator ühelt ekraanilt teisele üleminekuks.

Näiteks:

importida Reageerige alates'reageeri';
importida { NavigationContainer } alates'@react-navigation/native';
importida { CreateStackNavigator } alates'@react-navigation/stack';
// Importige ekraani komponendid
importida Avakuva alates'./screens/HomeScreen';
importida Üksikasjad Ekraan alates'./screens/DetailsScreen';
konst Stack = createStackNavigator();
konst Rakendus = () => {
tagasi (


"Kodu" component={HomeScreen} />
"Üksikasjad" komponent={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
eksportidavaikimisi Rakendus;

Ülaltoodud koodiplokk loob kasutades Stack Navigatori komponendi createStackNavigator() navigeerimisraamatukogust.

Selles näites on Stack Navigatoril kaks ekraani: Kodu ja Üksikasjad.

Nüüd installige Stack Navigator:

npm install @react-navigation/stack

Sees Avakuva, saate kasutada navigeerimine objekt virnanavigaatori testimiseks:

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

 pealkiri="Navigeerige .."
 onPress={() => navigation.navigate("DetailScreen")}
 />
 </View>
 );
};
eksportidavaikimisi Avakuva;
konst stiilid = StyleSheet.create({});

Pange tähele, kuidas Stack Navigator loob automaatselt noolenupu eelmistele ekraanidele tagasi liikumiseks.

Vahekaardinavigaator

Mõnes olukorras ei paku edasi-tagasi navigeerimissüsteem, nagu Stack Navigator, suurepärast kogemust. Nendel juhtudel sobib paremini Tab Navigator. See kuvab kasutajale eelnevalt saadaolevad navigeerimisekraanid ja seda on lihtsam kasutada, nagu veebinavigeerimisriba.

Alustamiseks installige @react-navigation/bottom-tabs raamatukogu kasutamine NPM-i paketihaldur.

Koos createBottomNavigator(), saate luua vahekaardinavigaatori eksemplari, nagu tegite virnavigaatoriga:

importida { CreateBottomTabNavigator } alates'@react-navigation/bottom-tabs';
konst Tab = createBottomTabNavigator();

Seejärel määrake navigaatoris ja vahekaartidena soovitud ekraanid Navigatsioonikonteiner:

eksportidavaikimisifunktsiooniRakendus() {
tagasi (


 nimi ="Kodu"
 komponent={HomeScreen}
 valikud={{ pealkiri: "Kodu" }}
 />
 nimi ="Profiil"
 komponent={ProfileScreen}
 valikud={{ pealkiri: "Profiil" }}
 />
 nimi ="Üksikasjad"
 komponent={DetailScreen}
 valikud={{ pealkiri: "Üksikasjad" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Rakenduse käitamisel peaksite nägema vahekaartide navigaatorit, mille allosas on teie määratud ekraanid.

Sa võiksid kasutada tabBarPosition ovõimalus asetada navigaator kohale üleval, õige, vasakule, või põhja (vaikimisi).

Sahtli navigaator

Sahtlite navigaatorid ehk sahtlid on mobiilirakendustes levinud navigeerimismuster. Sahtleid saate avada libistades või nuppu puudutades. See paneb sahtel ekraani küljelt sisse libisema, paljastades selle sisu.

Drawer Navigatori kasutamiseks installige see koos reageerima-native-žestikäsitleja ja reageerima-native-reanimated:

npm install @react-navigation/drawer
npm install react-native-gesture-handler react-native-reanimated

Peate ka oma sees reanimeeritud konfigureerima babel.config.js fail:

moodul.exports = {
 eelseaded: ["baabel-preset-expo"],
 pluginad: ["react-native-reanimated/plugin"],
};

Siin on näide sahtli navigaatori seadistamisest.

importida"reage-native-žestihaldur"; // See import peab olema ülaosas
importida { Vaade, tekst, nupp } alates"reageer-native";
importida { CreateDrawerNavigator } alates"@react-navigation/drawer";
importida { NavigationContainer } alates"@react-navigation/native";
konst Drawer = CreateDrawerNavigator();
konst Sahtlisisu = ({ navigation }) => {
tagasi (
painduv: 1, joondadaItems: "Keskus", õigustaSisu: "Keskus" }}>
fondi suurus: 24, fontWeight: "julge" }}>
 Tere tulemast Sahtlisse
 </Text>

 See on lisasisu, mida saate kuvada sisse sahtel.
 </Text>
"Sule sahtel" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konst Rakendus = () => (

 originalRouteName="Kodu"
 drawerContent={(rekvisiidid) => <Sahtli sisu {...rekvisiidid} />}
 >
 {/* Teie teised ekraanid siin */}
 </Drawer.Navigator>
 </NavigationContainer>
);
eksportidavaikimisi Rakendus;

Selles näites on Sahtli sisu komponent edastatakse kui sahtliSisu toetada looDrawerNavigator. Sees Sahtli sisu komponendi abil saate tekstikomponentide või muude elementide ja stiili abil kohandada sisu soovitud teabe kuvamiseks.

Vahelehtede navigaatorid on staatilised ja alati nähtavad. See ei ole alati parim, kuna vahekaardid blokeerivad osa ekraanist ja võivad põhiekraanilt fookuse eemale viia. Saate kasutada sahtleid dünaamilise vahelehtede navigaatorina ja luua sahtlitesse navigeerimismenüü. Seejärel saavad kasutajad navigeerimismenüü leidmiseks sahtli avada.

Sahtlit saate kasutada ka täiendava sisu kuvamiseks, näiteks otsinguriba, kasutajaprofiili, kontekstuaalse teabe või muu, mis ei vaja täisekraanivaadet.

Mõelge järgmistele parimatele tavadele, et saada Sahtli navigaatorist maksimumi.

• Vältige sahtli üle koormamist liiga paljude valikutega ja keskenduge kõige asjakohasemate ja sagedamini kasutatavate funktsioonide esitamisele.
• Kategoriseerige seotud üksused loogiliselt ja intuitiivselt, et aidata kasutajatel otsitava kiiresti leida.
• Kasutage ikoone või visuaalseid indikaatoreid, et aidata kasutajatel mõista iga sahtlis oleva üksuse eesmärki.

Andmete edastamine navigeerimisrekvisiidiga

React Navigation pakub võimsat mehhanismi, mis võimaldab teil edastada andmeid navigeerimisrekvisiitide kaudu.

Mõelge stsenaariumile, kus teil on ühel ekraanil üksuste loend ja kui kasutaja valib üksuse, soovite vastavad andmed teisele ekraanile edastada.

Esiteks peate määratlema oma navigeerimisstruktuuri. Nüüd andmete edastamiseks Avakuva kuni a DetailScreen kui üksus on valitud, sees Avakuva Määrake funktsioon, mis haldab navigeerimist ja sisaldab andmeid, mida soovite edastada.

importida Reageerige alates'reageeri';
importida { Vaade, tekst, nupp } alates'react-native';
konst Avaekraan = ({ navigation }) => {
konst handItemPress = (üksus) => {
 navigation.navigate("DetailScreen", { item });
 };
tagasi (

Nimekiri kohta Üksused </Text>
"Üksus 1" onPress={() => handleItemPress(„Üksuse 1 andmed”)} />
"Punkt 2" onPress={() => handleItemPress(„Üksuse 2 andmed”)} />
 </View>
 );
};
eksportidavaikimisi Avakuva;

The HandItemPress funktsioon kasutab navigation.navigate meetodile navigeerimiseks DetailScreen samas edastades valitud üksuse andmed parameetrina teises argumendis.

Et pääseda juurde läbitud andmetele DetailScreen komponenti, vajate navigeerimine prop:

importida Reageerige alates'reageeri';
importida { Vaade, tekst } alates'react-native';
konst DetailScreen = ({ navigation }) => {
konst item = navigation.getParam('artikkel', '');
tagasi (

Üksikasjalik ekraan</Text>
{item}</Text>
 </View>
 );
};
eksportidavaikimisi DetailScreen;

Siin, DetailScreen komponentide kasutust navigation.getParam läbitud üksuse toomiseks navigeerimisrekvisiidist. Selles näites määratakse tühja stringi vaikeväärtus juhuks, kui andmed pole saadaval. Nii ei jookse teie rakendus renderdamisel kokku.

Olenevalt teie rakenduse keerukusest võite uurida olekuhaldusteeke, nagu Redux või konteksti-API andmete globaalseks haldamiseks ja jagamiseks.

Navigatsioonikoodi korraldamine

Navigeerimiskoodi õige korraldamine aitab teil luua skaleeritava ja koostöövõimelise React Native rakenduse. Seda saate teha, jagades navigeerimisloogika hallatavateks mooduliteks. Nii on seda lihtne lugeda ja mõista.

Selle abil saate kindlasti luua oma kasutajatele sujuva navigeerimise ja samal ajal arenduskogemust nautida.