Kuinka rakentaa mobiilinavigointijärjestelmä React Navigationin avulla

Mobiilisovelluksissa tulee olla navigointijärjestelmä, joka ohjaa käyttäjää vaivattomasti eri näytöissä ja toiminnoissa.

React Navigation, tehokas ja joustava React Nativen navigointikirjasto, voi auttaa sinua luomaan tämän kokemuksen. Hyödyntämällä sen ominaisuuksia voit rakentaa vaivattomasti loistavan mobiilinavigointijärjestelmän.

React Navigation Libraryn asentaminen

React Navigation tarjoaa kolme päänavigointimallia, nimittäin pino-, välilehti- ja vetolaatikkonavigoinnin navigointijärjestelmän rakentamista varten. Nämä navigointimallit tarjoavat puitteet navigoinnin järjestämiseen ja hallintaan sovelluksesi eri näyttöjen välillä.

Aloita React Navigationin käyttö asentamalla kirjasto ja sen tarvittavat riippuvuudet:

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

Navigaattorin asentaminen

Jokainen React Navigationin navigaattori asuu omassa erillisessä kirjastossaan. Jotta voit käyttää navigaattoreita, sinun on asennettava ne yksitellen.

Hyvin harkittu projektirakenne on hyödyllinen, kun rakennat navigointijärjestelmää mobiilisovelluksellesi. Hyvä käytäntö on luoda src kansio projektisi juurihakemistossa. Tämän kansion sisällä pitäisi olla a näytöt kansio. Tämä erottaa näytön osat muista komponenteista.

Kirjoitat koodin, jotta voit määrittää projektissasi käyttämäsi navigointimallin App.js tiedosto.

Navigaattorin luominen sisällä App.js tiedosto on paras käytäntö useista syistä:

• The App.js tiedosto on yleensä React Native -sovelluksen ylätason komponentti. Navigaattorin määrittäminen tässä tiedostossa varmistaa, että navigointihierarkia on komponenttipuusi korkeimmalla tasolla ja käytettävissä kaikkialla.
• Navigaattorin asettaminen paikalleen App.js tiedoston avulla voit helposti käyttää ja välittää sovelluksen laajuista tilaa ja rekvisiittaa navigaattorin näytöille.
• React Navigation NavigationContainer tarjoaa navigointiin tarvittavan kontekstin ja sijaitsee tyypillisesti sisällä App.js. Sijoitamalla Navigatorin samaan tiedostoon, voit helposti integroida sen NavigationContainer.

Pinon navigaattori

Stack Navigator on React Navigation -kirjaston suosituin navigointimalli. Se käyttää pinotietorakennetta, jossa jokainen näyttö on täysin erilainen komponentti ja pinotaan edellisen päälle.

Kun uusi näyttö työnnetään pinon päälle, siitä tulee aktiivinen näyttö ja edellinen näyttö heitetään sen alle. Näin käyttäjät voivat navigoida edestakaisin pinon läpi, kuten verkkosivuston navigointikulussa. Sinä pystyt määritä pinonavigaattori siirtymään näytöstä toiseen.

Esimerkiksi:

tuonti Reagoi alkaen'reagoi';
tuonti { NavigationContainer } alkaen"@react-navigation/native";
tuonti { CreateStackNavigator } alkaen'@react-navigation/stack';
// Tuo näytön osat
tuonti Aloitusnäyttö alkaen'./screens/HomeScreen';
tuonti DetailsScreen alkaen'./screens/DetailsScreen';
konst Pino = createStackNavigator();
konst Sovellus = () => {
palata (


"Koti" Component={HomeScreen} />
"Yksityiskohdat" Component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
viedäoletuksena Sovellus;

Yllä oleva koodilohko luo Stack Navigator -komponentin käyttämällä createStackNavigator() navigointikirjastosta.

Tässä esimerkissä pinonavigaattorissa on kaksi näyttöä: Koti ja Yksityiskohdat.

Asenna nyt Stack Navigator:

npm install @react-navigation/stack

Sisällä Aloitusnäyttö, voit käyttää navigointi objekti pinonavigaattorin testaamiseksi:

tuonti { Tyylitaulukko, näkymä, painike } alkaen"react-natiivi";
tuonti Reagoi alkaen"reagoi";
konst Kotinäyttö = ({ navigointi }) => {
palata (

 otsikko="Navigoida johonkin .."
 onPress={() => navigation.navigate("DetailScreen")}
 />
 </View>
 );
};
viedäoletuksena Aloitusnäyttö;
konst tyylit = StyleSheet.create({});

Huomaa, kuinka Stack Navigator luo automaattisesti nuolipainikkeen, joka ohjaa takaisin edellisiin näyttöihin.

Välilehtinavigaattori

Joissakin tilanteissa edestakaisin navigointijärjestelmä, kuten Stack Navigator, ei tarjoa hienoa kokemusta. Tab Navigator sopii paremmin näihin tapauksiin. Se näyttää navigointinäytöt, jotka ovat käyttäjän käytettävissä etukäteen, ja niitä voi olla helpompi käyttää, kuten web-navigointipalkki.

Aloita asentamalla @react-navigation/bottom-tabs kirjaston käyttö NPM-pakettien hallinta.

Kanssa createBottomNavigator(), voit luoda välilehtinavigaattorin esiintymän kuten teit pinonavigaattorin kanssa:

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

Määritä sitten haluamasi näytöt välilehdiksi navigaattorissa ja NavigationContainer:

viedäoletuksenatoimintoSovellus() {
palata (


 nimi ="Koti"
 Component={HomeScreen}
 option={{ otsikko: "Koti" }}
 />
 nimi ="Profiili"
 Component={ProfileScreen}
 option={{ otsikko: "Profiili" }}
 />
 nimi ="Yksityiskohdat"
 Component={DetailScreen}
 option={{ otsikko: "Yksityiskohdat" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Kun käytät sovellusta, sinun pitäisi nähdä välilehtinavigaattori, jonka alareunassa on määrittämäsi näytöt.

Voisit käyttää tabBarPosition ovaihtoehto sijoittaa navigaattori kohtaan alkuun, oikein, vasemmalle, tai pohja (oletus).

Vetolaatikon navigaattori

Vetolaatikon navigaattorit tai vetolaatikot ovat yleinen navigointimalli mobiilisovelluksissa. Voit avata laatikot pyyhkäisemällä tai napauttamalla painiketta. Tämä saa laatikon liukumaan sisään näytön sivulta ja paljastamaan sen sisällön.

Jos haluat käyttää Drawer Navigatoria, asenna se yhdessä reagoi-alkuperäinen-ele-käsittelijä ja reagoi-syntyperäinen-elävöitetty:

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

Sinun on myös määritettävä uudelleen animaatio sisälläsi babel.config.js tiedosto:

moduuli.exports = {
 esiasetukset: ["babel-preset-expo"],
 lisäosat: ["react-native-reanimated/plugin"],
};

Tässä on esimerkki Drawer Navigatorin määrittämisestä:

tuonti"react-native-gesges-handler"; // Tämän tuonnin on oltava ylhäällä
tuonti { Näytä, teksti, painike } alkaen"react-natiivi";
tuonti { CreateDrawerNavigator } alkaen"@react-navigation/drawer";
tuonti { NavigationContainer } alkaen"@react-navigation/natiivi";
konst Drawer = CreateDrawerNavigator();
konst DrawerContent = ({ navigointi }) => {
palata (
flex: 1, alignItems: "keskusta", perustellaContent: "keskusta" }}>
Fonttikoko: 24, fontin paino: "lihavoitu" }}>
 Tervetuloa Draweriin
 </Text>

 Tämä on ylimääräistä sisältöä, jonka voit näyttää sisään lipasto.
 </Text>
"Sulje laatikko" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konst Sovellus = () => (

 originalRouteName="Koti"
 drawerContent={(rekvisiitta) => <DrawerContent {...rekvisiitta} />}
 >
 {/* Muut näytösi täällä */}
 </Drawer.Navigator>
 </NavigationContainer>
);
viedäoletuksena Sovellus;

Tässä esimerkissä DrawerContent komponentti välitetään nimellä laatikon sisältö tukea CreateDrawerNavigator. Sisällä DrawerContent komponentti, voit mukauttaa sisällön näyttämään haluamasi tiedot käyttämällä tekstikomponentteja tai muita elementtejä ja tyyliä.

Välilehtien navigaattorit ovat staattisia ja aina näkyvissä. Tämä ei ole aina parasta, sillä välilehdet peittävät osia näytöstä ja voivat viedä tarkennuksen pois päänäytöstä. Voit käyttää vetolaatikoita dynaamisena välilehtinavigaattorina ja luoda navigointivalikon laatikoihin. Käyttäjät voivat sitten avata laatikon löytääkseen navigointivalikon.

Voit käyttää vetolaatikkoa myös lisäsisällön, kuten hakupalkin, käyttäjäprofiilin, asiayhteyteen liittyvien tietojen tai muun sisällön näyttämiseen, joka ei vaadi koko näytön näkymää.

Harkitse näitä parhaita käytäntöjä saadaksesi kaiken irti Drawer Navigatorista:

• Vältä täyttämästä laatikkoa liian monilla vaihtoehdoilla ja keskity tärkeimpien ja usein käytettyjen ominaisuuksien esittelyyn.
• Luokittele aiheeseen liittyvät kohteet loogisesti ja intuitiivisesti, jotta käyttäjät löytävät nopeasti etsimänsä.
• Käytä kuvakkeita tai visuaalisia osoittimia auttamaan käyttäjiä ymmärtämään laatikon jokaisen kohteen tarkoituksen.

Tietojen välittäminen navigointipalvelimilla

React Navigation tarjoaa tehokkaan mekanismin, jonka avulla voit välittää tietoja navigointilaitteiden läpi.

Harkitse tilannetta, jossa sinulla on luettelo kohteista yhdellä näytöllä ja kun käyttäjä valitsee kohteen, haluat siirtää vastaavat tiedot toiseen näyttöön.

Ensin sinun on määritettävä navigointirakenne. Nyt, siirtää tietoja Aloitusnäyttö a DetailScreen kun kohde on valittu, sisällä Aloitusnäyttö Määritä toiminto, joka käsittelee navigointia ja sisältää tiedot, jotka haluat ohittaa.

tuonti Reagoi alkaen'reagoi';
tuonti { Näytä, teksti, painike } alkaen'react-native';
konst Kotinäyttö = ({ navigointi }) => {
konst handleItemPress = (kohde) => {
 navigation.navigate('DetailScreen', { item });
 };
palata (

Lista / Tuotteet </Text>
"kohde 1" onPress={() => handleItemPress("Kohteen 1 tiedot")} />
"kohde 2" onPress={() => handleItemPress("Kohteen 2 tiedot")} />
 </View>
 );
};
viedäoletuksena Aloitusnäyttö;

The handleItemPress toiminto hyödyntää navigation.navigate tapa navigoida kohteeseen DetailScreen samalla kun välitetään valitun kohteen tiedot parametrina toisessa argumentissa.

Pääset käsiksi siirrettyihin tietoihin sisällä DetailScreen komponenttia, tarvitset navigointi prop:

tuonti Reagoi alkaen'reagoi';
tuonti { Näytä, teksti } alkaen'react-native';
konst DetailScreen = ({ navigointi }) => {
konst item = navigation.getParam('tuote', '');
palata (

Yksityiskohtainen näyttö</Text>
{item}</Text>
 </View>
 );
};
viedäoletuksena DetailScreen;

Tässä, DetailScreen komponenttien käyttötarkoituksia navigation.getParam noutaaksesi ohitetun kohteen navigointivarusteista. Tässä esimerkissä tyhjän merkkijonon oletusarvo asetetaan siltä varalta, että tietoja ei ole saatavilla. Tällä tavalla sovelluksesi ei kaatu hahmonnettaessa.

Sovelluksesi monimutkaisuudesta riippuen voit tutkia käyttämällä tilanhallintakirjastoja, kuten Redux tai konteksti-API hallita ja jakaa tietoja maailmanlaajuisesti.

Navigointikoodin järjestäminen

Suunnistuskoodin oikea järjestäminen auttaa sinua rakentamaan skaalautuvan ja yhteistyöhön perustuvan React Native -sovelluksen. Voit tehdä tämän jakamalla navigointilogiikan hallittaviin moduuleihin. Näin se on helppo lukea ja ymmärtää.

Tämän avulla voit olla varma, että luot saumattoman navigoinnin käyttäjillesi samalla kun nautit kehityskokemuksesta.