Kako zgraditi mobilni navigacijski sistem z React Navigacijo

Mobilne aplikacije bi morale imeti navigacijski sistem, ki uporabnike brez težav vodi skozi različne zaslone in funkcionalnosti.

React Navigation, zmogljiva in prilagodljiva navigacijska knjižnica za React Native, vam lahko pomaga ustvariti to izkušnjo. Z izkoriščanjem njegovih zmogljivosti lahko brez truda sestavite odličen mobilni navigacijski sistem.

Namestitev navigacijske knjižnice React

React Navigation ponuja tri glavne navigacijske vzorce, in sicer navigacijo Stack, Tab in Drawer za izdelavo navigacijskega sistema. Ti vzorci krmarjenja zagotavljajo okvir za organiziranje in upravljanje krmarjenja med različnimi zasloni v vaši aplikaciji.

Če želite začeti uporabljati React Navigation, namestite knjižnico in njene potrebne odvisnosti:

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

Nastavitev navigatorja

Vsak navigator znotraj React Navigation živi v svoji ločeni knjižnici. Če želite uporabljati katerega koli od navigatorjev, jih boste morali namestiti posamično.

Dobro premišljena struktura projekta je uporabna pri gradnji navigacijskega sistema za vašo mobilno aplikacijo. Dobra praksa je ustvariti src mapo v korenskem imeniku vašega projekta. Znotraj te mape bi morali imeti zasloni mapo. To bo služilo za ločevanje komponent zaslona od drugih komponent.

Napisali boste kodo za nastavitev navigacijskega vzorca, ki ga uporabljate v svojem projektu App.js mapa.

Ustvarjanje Navigatorja znotraj App.js datoteka je najboljša praksa iz več razlogov:

• The App.js je običajno komponenta najvišje ravni v aplikaciji React Native. Definiranje Navigatorja v tej datoteki bo zagotovilo, da je navigacijska hierarhija na najvišji ravni drevesa komponent in dostopna povsod.
• Namestitev Navigatorja v App.js vam omogoča enostaven dostop in prenos stanja in rekvizitov celotne aplikacije na zaslone v navigatorju.
• React Navigation's Navigacijski vsebnik zagotavlja potreben kontekst za navigacijo in se običajno nahaja znotraj App.js. Če Navigator postavite v isto datoteko, ga lahko enostavno integrirate z Navigacijski vsebnik.

Stack Navigator

Stack Navigator je najbolj priljubljen navigacijski vzorec v knjižnici React Navigation. Uporablja podatkovno strukturo sklada, kjer je vsak zaslon popolnoma drugačna komponenta in je naložen na prejšnjega.

Ko je nov zaslon potisnjen na vrh sklada, postane aktivni zaslon, prejšnji zaslon pa je vržen pod njim. To uporabnikom omogoča navigacijo naprej in nazaj skozi sklad, kot je tok navigacije spletnega mesta. Ti lahko nastavite navigator sklada za prehod z enega zaslona na drugega.

Na primer:

uvoz Reagiraj od'reagirati';
uvoz {NavigationContainer} od'@react-navigation/native';
uvoz { createStackNavigator } od'@react-navigation/stack';
// Uvoz komponent zaslona
uvoz Domači zaslon od'./screens/HomeScreen';
uvoz Zaslon s podrobnostmi od'./screens/DetailsScreen';
konst Stack = createStackNavigator();
konst Aplikacija = () => {
vrnitev (


"dom" component={HomeScreen} />
"Podrobnosti" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
izvozprivzeto aplikacija;

Zgornji blok kode ustvari komponento Stack Navigator z uporabo createStackNavigator() iz navigacijske knjižnice.

V tem primeru ima Stack Navigator dva zaslona: domov in Podrobnosti.

Zdaj namestite Stack Navigator:

npm namestite @react-navigation/stack

V notranjosti Domači zaslon, lahko uporabite navigacijo predmet za preizkušanje Stack Navigatorja:

uvoz {Slogovna tabela, pogled, gumb} od"react-native";
uvoz Reagiraj od"reagirati";
konst Domači zaslon = ({ navigacija }) => {
vrnitev (

 naslov="Navigacija do .."
 onPress={() => navigation.navigate("DetailScreen")}
 />
 </View>
 );
};
izvozprivzeto Domači zaslon;
konst styles = StyleSheet.create({});

Upoštevajte, kako Stack Navigator samodejno ustvari puščični gumb za upravljanje navigacije nazaj na prejšnje zaslone.

Navigator zavihkov

V nekaterih situacijah uporaba navigacijskega sistema naprej in nazaj, kot je Stack Navigator, ne zagotavlja odlične izkušnje. Za te primere je bolj primeren navigator zavihkov. Prikazuje navigacijske zaslone, ki so uporabniku na voljo vnaprej, in je lahko lažji za uporabo, kot spletna navigacijska vrstica.

Za začetek namestite @react-navigation/bottom-tabs uporabo knjižnice upravljalnik paketov NPM.

z createBottomNavigator(), lahko ustvarite primerek Navigatorja zavihkov, kot ste to storili z Navigatorjem sklada:

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

In nato definirajte želene zaslone kot zavihke v navigatorju in Navigacijski vsebnik:

izvozprivzetofunkcijoaplikacija() {
vrnitev (


 ime="dom"
 komponenta={Domači zaslon}
 možnosti={{ naslov: "dom" }}
 />
 ime="Profil"
 komponenta={ProfileScreen}
 možnosti={{ naslov: "Profil" }}
 />
 ime="Podrobnosti"
 komponenta={DetailScreen}
 možnosti={{ naslov: "Podrobnosti" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Ko zaženete aplikacijo, bi morali videti Krmar za zavihke z določenimi zasloni na dnu.

Lahko bi uporabil TabBarPosition omožnost, da navigator postavite na vrh, prav, levo, oz dno (privzeto).

Navigator predalov

Navigatorji predalov ali predali so pogost vzorec krmarjenja v mobilnih aplikacijah. Predale lahko odprete tako, da povlečete ali tapnete gumb. To povzroči, da predal zdrsne s strani zaslona in razkrije njegovo vsebino.

Če želite uporabljati Drawer Navigator, ga namestite skupaj z react-native-gesture-handler in reagirati-native-reanimated:

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

Prav tako boste morali konfigurirati reanimated v svojem babel.config.js mapa:

modul.exports = {
 prednastavitve: ["babel-preset-expo"],
 vtičniki: ["react-native-reanimated/plugin"],
};

Tu je primer, kako nastavite Krmarja po predalu:

uvoz"react-native-gesture-handler"; // Ta uvoz mora biti na vrhu
uvoz {Pogled, besedilo, gumb} od"react-native";
uvoz { createDrawerNavigator } od"@react-navigation/drawer";
uvoz {NavigationContainer} od"@react-navigation/native";
konst Predal = createDrawerNavigator();
konst Vsebina predala = ({ navigacija }) => {
vrnitev (
flex: 1, alignItems: "center", justifyContent: "center" }}>
velikost pisave: 24, fontWeight: "krepko" }}>
 Dobrodošli v predalu
 </Text>

 To je nekaj dodatne vsebine, ki jo lahko prikažete v predal.
 </Text>
"Zapri predal" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konst Aplikacija = () => (

 initialRouteName="dom"
 drawerContent={(rekviziti) => <DrawerContent {...rekviziti} />}
 >
 {/* Vaši drugi zasloni tukaj */}
 </Drawer.Navigator>
 </NavigationContainer>
);
izvozprivzeto aplikacija;

V tem primeru je DrawerContent komponenta se posreduje kot drawerContent podpirati createDrawerNavigator. Znotraj DrawerContent komponento, lahko prilagodite vsebino za prikaz želenih informacij z besedilnimi komponentami ali drugimi elementi in slogom.

Navigatorji zavihkov so statični in vedno vidni. To ni vedno najboljše, saj zavihki blokirajo dele zaslona in lahko premaknejo fokus z glavnega zaslona. Predale lahko uporabite kot dinamični navigator zavihkov in ustvarite navigacijski meni znotraj predalnikov. Uporabniki lahko nato odprejo predal in poiščejo navigacijski meni.

Predal lahko uporabite tudi za prikaz dodatne vsebine, kot je iskalna vrstica, uporabniški profil, kontekstualne informacije ali karkoli, kar ne zahteva celozaslonskega pogleda.

Upoštevajte te najboljše prakse, da kar najbolje izkoristite Navigator predalov:

• Izogibajte se prenatrpanosti predala s preveč možnostmi in se osredotočite na predstavitev najbolj ustreznih in pogosto uporabljenih funkcij.
• Logično in intuitivno kategorizirajte povezane predmete, da uporabnikom pomagate hitro najti, kar iščejo.
• Uporabite ikone ali vizualne indikatorje, da uporabnikom pomagate razumeti namen posameznega predmeta v predalu.

Posredovanje podatkov z navigacijskimi pripomočki

React Navigation ponuja zmogljiv mehanizem, ki vam omogoča posredovanje podatkov skozi navigacijske pripomočke.

Razmislite o scenariju, kjer imate seznam elementov na enem zaslonu in ko uporabnik izbere element, želite posredovati ustrezne podatke na drug zaslon.

Najprej morate določiti strukturo navigacije. Zdaj pa za prenos podatkov iz Domači zaslon do a DetailScreen ko je predmet izbran, znotraj Domači zaslon definirajte funkcijo, ki upravlja navigacijo in vključuje podatke, ki jih želite posredovati.

uvoz Reagiraj od'reagirati';
uvoz {Pogled, besedilo, gumb} od'react-native';
konst Domači zaslon = ({ navigacija }) => {
konst handleItemPress = (postavka) => {
 navigation.navigate('DetailScreen', { element });
 };
vrnitev (

Seznam od Predmeti</Text>
"Predmet 1" onPress={() => handleItemPress('Podatki o artiklu 1')} />
"Postavka 2" onPress={() => handleItemPress('Podatki o predmetu 2')} />
 </View>
 );
};
izvozprivzeto Domači zaslon;

The handleItemPress funkcija uporablja navigacija.krmariti način za navigacijo do DetailScreen medtem ko podatke o izbrani postavki posredujete kot parameter v drugem argumentu.

Da bi lahko dostopali do posredovanih podatkov znotraj DetailScreen komponento, boste potrebovali navigacijo rekvizit:

uvoz Reagiraj od'reagirati';
uvoz { Pogled, Besedilo } od'react-native';
konst DetailScreen = ({ navigacija }) => {
konst item = navigation.getParam('predmet', '');
vrnitev (

Zaslon s podrobnostmi</Text>
{item}</Text>
 </View>
 );
};
izvozprivzeto DetailScreen;

Tukaj, DetailScreen uporabe komponent navigation.getParam za pridobitev posredovanega elementa iz navigacijskih rekvizitov. V tem primeru je nastavljena privzeta vrednost praznega niza, če podatki niso na voljo. Tako se vaša aplikacija pri upodabljanju ne bo zrušila.

Odvisno od kompleksnosti vaše aplikacije, lahko raziščete uporabo knjižnic za upravljanje stanja, kot je Redux ali kontekstni API za globalno upravljanje in skupno rabo podatkov.

Organiziranje vaše navigacijske kode

Pravilno organiziranje vaše navigacijske kode vam bo pomagalo zgraditi razširljivo in sodelovalno aplikacijo React Native. To lahko storite tako, da navigacijsko logiko razdelite na obvladljive module. To bo olajšalo branje in razumevanje.

S tem ste lahko prepričani, da ustvarite brezhibno navigacijo za svoje uporabnike, medtem ko uživate v razvojni izkušnji.