Kako izgraditi mobilni navigacijski sustav s React navigacijom

Mobilne aplikacije trebaju imati navigacijski sustav koji korisnike bez napora vodi kroz različite zaslone i funkcionalnosti.

React Navigation, snažna i fleksibilna navigacijska biblioteka za React Native, može vam pomoći stvoriti to iskustvo. Iskorištavanjem njegovih mogućnosti možete bez napora konstruirati odličan mobilni navigacijski sustav.

Instaliranje React navigacijske biblioteke

React Navigation nudi tri glavna obrasca navigacije, naime navigaciju Stack, Tab i Drawer za izgradnju navigacijskog sustava. Ovi obrasci navigacije pružaju okvir za organiziranje i upravljanje navigacijom između različitih zaslona unutar vaše aplikacije.

Kako biste počeli koristiti React Navigaciju, instalirajte biblioteku i njezine potrebne ovisnosti:

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

Postavljanje navigatora

Svaki navigator unutar React Navigacije živi u svojoj zasebnoj biblioteci. Da biste koristili bilo koji od navigatora, morat ćete ih instalirati zasebno.

Dobro promišljena struktura projekta korisna je pri izgradnji navigacijskog sustava za vašu mobilnu aplikaciju. Dobra praksa je stvoriti src mapu u korijenskom direktoriju vašeg projekta. Unutar ove mape trebali biste imati ekrani mapa. Ovo će služiti za odvajanje komponenti vašeg zaslona od ostalih komponenti.

Napisat ćete kod za postavljanje navigacijskog obrasca koji koristite unutar svog projekta App.js datoteka.

Stvaranje Navigatora unutar App.js datoteka je najbolja praksa iz nekoliko razloga:

• The App.js datoteka obično je komponenta najviše razine u aplikaciji React Native. Definiranje Navigatora u ovoj datoteci osigurat će da je navigacijska hijerarhija na najvišoj razini vašeg stabla komponenti i dostupna u cijelom dijelu.
• Postavljanje Navigatora u App.js omogućava vam jednostavan pristup i prosljeđivanje stanja i rekvizita cijele aplikacije na zaslone unutar navigatora.
• React Navigation's Navigacijski spremnik pruža potreban kontekst za navigaciju i obično se nalazi unutra App.js. Postavljanjem Navigatora u istu datoteku, možete ga jednostavno integrirati s Navigacijski spremnik.

Stack Navigator

Stack Navigator je najpopularniji navigacijski obrazac unutar React Navigation biblioteke. Koristi strukturu podataka snopa gdje je svaki zaslon potpuno drugačija komponenta i slaže se na prethodni.

Kada se novi zaslon gurne na vrh hrpe, on postaje aktivni zaslon, a prethodni se zaslon baca ispod njega. To korisnicima omogućuje navigaciju naprijed-natrag kroz stog, poput tijeka navigacije web stranice. Možeš postavite navigator snopa za prijelaz s jednog zaslona na drugi.

Na primjer:

uvoz Reagirati iz'reagirati';
uvoz {NavigationContainer} iz'@react-navigation/native';
uvoz { createStackNavigator } iz'@react-navigation/stack';
// Uvezite svoje komponente zaslona
uvoz Početni zaslon iz'./screens/HomeScreen';
uvoz Zaslon s detaljima iz'./screens/DetailsScreen';
konst Stack = createStackNavigator();
konst Aplikacija = () => {
povratak (


"Dom" component={HomeScreen} />
"Detalji" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
izvozzadano aplikacija;

Gornji blok koda stvara komponentu Stack Navigatora pomoću createStackNavigator() iz navigacijske knjižnice.

U ovom primjeru Stack Navigator ima dva zaslona: Dom i pojedinosti.

Sada instalirajte Stack Navigator:

npm instalirajte @react-navigation/stack

Iznutra Početni zaslon, možete koristiti navigacija objekt za testiranje Stack Navigatora:

uvoz {Stilski list, prikaz, gumb} iz"react-native";
uvoz Reagirati iz"reagirati";
konst Početni zaslon = ({ navigacija }) => {
povratak (

 naslov="Navigiraj do .."
 onPress={() => navigation.navigate("DetailScreen")}
 />
 </View>
 );
};
izvozzadano Početni zaslon;
konst stilovi = StyleSheet.create({});

Primijetite kako Stack Navigator automatski stvara gumb sa strelicom za upravljanje navigacijom natrag na prethodne zaslone.

Navigator kartica

U nekim situacijama posjedovanje navigacijskog sustava naprijed-natrag kao što je Stack Navigator ne pruža sjajno iskustvo. Navigator kartica je prikladniji za ove slučajeve. Prikazuje navigacijske zaslone koji su unaprijed dostupni korisniku i može biti lakši za korištenje, poput web navigacijske trake.

Za početak instalirajte @react-navigation/bottom-tabs korištenje knjižnice upravitelj NPM paketa.

S createBottomNavigator(), možete stvoriti instancu Navigatora kartica kao što ste to učinili s Navigatorom snopa:

uvoz { createBottomTabNavigator } iz'@react-navigation/bottom-tabs';
konst Tab = createBottomTabNavigator();

Zatim definirajte zaslone koje želite kao kartice unutar navigatora i Navigacijski spremnik:

izvozzadanofunkcijaaplikacija() {
povratak (


 ime="Dom"
 komponenta={Početni zaslon}
 opcije={{ titula: "Dom" }}
 />
 ime="Profil"
 komponenta={ProfileScreen}
 opcije={{ titula: "Profil" }}
 />
 ime="Detalji"
 komponenta={DetailScreen}
 opcije={{ titula: "Detalji" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Kada pokrenete svoju aplikaciju, trebali biste vidjeti Navigator kartica s definiranim zaslonima na dnu.

Mogli biste koristiti TabBarPosition omogućnost postavljanja navigatora na vrh, pravo, lijevo, ili dno (zadano).

Navigator ladica

Navigatori ladica ili ladice uobičajeni su navigacijski obrazac u mobilnim aplikacijama. Možete otvoriti ladice povlačenjem ili dodirivanjem gumba. To uzrokuje da ladica sklizne sa strane zaslona, ​​otkrivajući njezin sadržaj.

Da biste koristili Drawer Navigator, instalirajte ga zajedno s obrađivač geste-reagiranja i reagirati-domaći-reanimirani:

npm instalirajte @react-navigation/drawer
npm instaliraj react-native-gesture-handler react-native-reanimated

Također ćete morati konfigurirati reanimated unutar vašeg babel.config.js datoteka:

modul.izvoz = {
 unaprijed postavljene postavke: ["babel-preset-expo"],
 dodaci: ["react-native-reanimated/plugin"],
};

Evo primjera kako postaviti Navigator ladica:

uvoz"react-native-gesture-handler"; // Ovaj uvoz mora biti na vrhu
uvoz { Prikaz, Tekst, Gumb } iz"react-native";
uvoz { createDrawerNavigator } iz"@react-navigation/ladica";
uvoz {NavigationContainer} iz"@react-navigation/native";
konst Ladica = createDrawerNavigator();
konst Sadržaj ladice = ({ navigacija }) => {
povratak (
savijati: 1, alignItems: "centar", justifyContent: "centar" }}>
veličina fonta: 24, fontWeight: "podebljano" }}>
 Dobrodošli u Ladicu
 </Text>

 Ovo je dodatni sadržaj koji možete prikazati u crtač.
 </Text>
"Zatvori ladicu" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konst Aplikacija = () => (

 početni nazivputa="Dom"
 drawerContent={(rekviziti) => <Sadržaj ladice {...rekviziti} />}
 >
 {/* Vaši drugi zasloni ovdje */}
 </Drawer.Navigator>
 </NavigationContainer>
);
izvozzadano aplikacija;

U ovom primjeru, Sadržaj ladice komponenta se prenosi kao drawerContent podupirati createDrawerNavigator. Unutar Sadržaj ladice komponentu, možete prilagoditi sadržaj za prikaz željenih informacija pomoću tekstualnih komponenti ili bilo kojih drugih elemenata i stila.

Navigatori kartica su statični i uvijek vidljivi. Ovo nije uvijek najbolje jer kartice blokiraju dijelove zaslona i mogu odmaknuti fokus s glavnog zaslona. Možete koristiti ladice kao dinamički navigator kartica i stvoriti navigacijski izbornik unutar ladica. Korisnici tada mogu otvoriti ladicu i pronaći navigacijski izbornik.

Također možete koristiti ladicu za prikaz dodatnog sadržaja poput trake za pretraživanje, korisničkog profila, kontekstualnih informacija ili bilo čega što ne zahtijeva prikaz preko cijelog zaslona.

Razmotrite ove najbolje prakse kako biste što bolje iskoristili Drawer Navigator:

• Izbjegnite pretrpavanje ladice s previše opcija i usredotočite se na predstavljanje najrelevantnijih i najčešće korištenih značajki.
• Logično i intuitivno kategorizirajte povezane stavke kako biste pomogli korisnicima da brzo pronađu ono što traže.
• Koristite ikone ili vizualne indikatore kako biste pomogli korisnicima da razumiju svrhu svake stavke u ladici.

Prosljeđivanje podataka s navigacijskim elementima

React Navigation pruža snažan mehanizam koji vam omogućuje prosljeđivanje podataka kroz navigacijske rekvizite.

Razmotrite scenarij u kojem imate popis stavki na jednom zaslonu, a kada korisnik odabere stavku, želite proslijediti odgovarajuće podatke na drugi zaslon.

Prvo morate definirati strukturu navigacije. Sada, za prijenos podataka iz Početni zaslon do a DetailScreen kada je stavka odabrana, unutra Početni zaslon definirajte funkciju koja upravlja navigacijom i uključuje podatke koje želite proslijediti.

uvoz Reagirati iz'reagirati';
uvoz { Prikaz, Tekst, Gumb } iz'react-native';
konst Početni zaslon = ({ navigacija }) => {
konst handleItemPress = (artikal) => {
 navigacija.navigate('DetailScreen', { stavka });
 };
povratak (

Popis od Predmeti</Text>
"Stavka 1" onPress={() => handleItemPress('Podaci o stavci 1')} />
"Stavka 2" onPress={() => handleItemPress('Podaci o stavci 2')} />
 </View>
 );
};
izvozzadano Početni zaslon;

The rukovatiItemPress funkcija koristi navigacija.navigirati metoda za navigaciju do DetailScreen dok prosljeđuje podatke odabrane stavke kao parametar u drugom argumentu.

Da biste mogli pristupiti proslijeđenim podacima unutar DetailScreen komponentu, trebat će vam navigacija oslonac:

uvoz Reagirati iz'reagirati';
uvoz { Pogled, Tekst } iz'react-native';
konst DetailScreen = ({ navigacija }) => {
konst item = navigation.getParam('artikal', '');
povratak (

Zaslon s detaljima</Text>
{item}</Text>
 </View>
 );
};
izvozzadano DetailScreen;

Evo, DetailScreen upotrebe komponenti navigacija.getParam za dohvaćanje položene stavke iz navigacijskih rekvizita. U ovom primjeru postavljena je zadana vrijednost praznog niza u slučaju da podaci nisu dostupni. Na taj se način vaša aplikacija neće srušiti prilikom renderiranja.

Ovisno o složenosti vaše aplikacije, možete istražiti korištenje biblioteka za upravljanje stanjem kao što je Redux ili kontekstualni API za globalno upravljanje i dijeljenje podataka.

Organiziranje vašeg navigacijskog koda

Ispravno organiziranje vašeg navigacijskog koda pomoći će vam da izgradite skalabilnu i suradničku aplikaciju React Native. To možete učiniti rastavljanjem navigacijske logike na module kojima se može upravljati. To će olakšati čitanje i razumijevanje.

Uz ovo, možete biti sigurni da ćete stvoriti besprijekornu navigaciju za svoje korisnike dok uživate u iskustvu razvoja.