Kā izveidot mobilo navigācijas sistēmu ar React navigāciju

Mobilajām lietotnēm ir jābūt navigācijas sistēmai, kas lietotājiem bez piepūles vada dažādus ekrānus un funkcijas.

React Navigation, jaudīga un elastīga React Native navigācijas bibliotēka, var palīdzēt jums izveidot šo pieredzi. Izmantojot tās iespējas, jūs bez piepūles varat izveidot lielisku mobilo navigācijas sistēmu.

React navigācijas bibliotēkas instalēšana

React Navigation piedāvā trīs galvenos navigācijas modeļus, proti, kaudzes, cilnes un atvilktnes navigāciju, lai izveidotu navigācijas sistēmu. Šie navigācijas modeļi nodrošina ietvaru navigācijas organizēšanai un pārvaldībai starp dažādiem jūsu lietotnes ekrāniem.

Lai sāktu lietot React Navigation, instalējiet bibliotēku un tās nepieciešamās atkarības:

npm instalēt @react-navigation/native
npm instalēt react-native-screens react-native-safe-area-context

Navigatora iestatīšana

Katrs React Navigation navigators atrodas savā atsevišķā bibliotēkā. Lai izmantotu kādu no navigatoriem, tie būs jāinstalē atsevišķi.

Pārdomāta projekta struktūra ir noderīga, veidojot mobilās lietotnes navigācijas sistēmu. Laba prakse ir izveidot src mapi sava projekta saknes direktorijā. Šajā mapē jums vajadzētu būt a ekrāni mapi. Tas noderēs ekrāna komponentu atdalīšanai no citiem komponentiem.

Jūs izrakstīsit kodu, lai iestatītu navigācijas modeli, ko izmantojat savā projektā App.js failu.

Navigatora izveide iekšpusē App.js fails ir labākā prakse vairāku iemeslu dēļ:

• The App.js fails parasti ir React Native lietotnes augstākā līmeņa komponents. Navigatora definēšana šajā failā nodrošinās, ka navigācijas hierarhija atrodas jūsu komponentu koka augstākajā līmenī un ir pieejama visā.
• Navigatora ievietošana App.js fails ļauj ērti piekļūt un nodot navigatora ekrāniem visas lietotnes statusu un rekvizītus.
• Reaģēt uz navigāciju Navigācijas konteiners nodrošina navigācijai nepieciešamo kontekstu un parasti atrodas iekšpusē App.js. Ievietojot navigatoru tajā pašā failā, varat to viegli integrēt ar Navigācijas konteiners.

Stack Navigator

Stack Navigator ir vispopulārākais navigācijas modelis React Navigation bibliotēkā. Tajā tiek izmantota kaudzes datu struktūra, kurā katrs ekrāns ir pilnīgi atšķirīgs komponents un ir sakrauts virs iepriekšējā.

Kad jauns ekrāns tiek uzspiests uz kaudzes, tas kļūst par aktīvo ekrānu, un iepriekšējais ekrāns tiek izmests zem tā. Tādējādi lietotāji var pārvietoties uz priekšu un atpakaļ pa kaudzi, piemēram, vietnes navigācijas plūsmā. Jūs varat iestatiet kaudzes navigatoru, lai pārietu no viena ekrāna uz citu.

Piemēram:

imports Reaģēt no'reaģēt';
imports { NavigationContainer } no"@react-navigation/native";
imports { CreateStackNavigator } no'@react-navigation/stack';
// Importējiet ekrāna komponentus
imports Sākuma ekrāns no'./screens/HomeScreen';
imports DetaļasEkrāns no'./screens/DetailsScreen';
konst Stack = createStackNavigator();
konst Lietotne = () => {
atgriezties (


"Mājas" komponents={HomeScreen} />
"Detaļas" komponents={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
eksportētnoklusējuma Lietotne;

Iepriekš minētais koda bloks izveido Stack Navigator komponentu, izmantojot CreateStackNavigator() no navigācijas bibliotēkas.

Šajā piemērā Stack Navigator ir divi ekrāni: Mājas un Sīkāka informācija.

Tagad instalējiet Stack Navigator:

npm instalēt @react-navigation/stack

Iekšā Sākuma ekrāns, varat izmantot navigācija objekts, lai pārbaudītu Stack Navigator:

imports { Stila lapa, skats, poga } no"reaģēt-native";
imports Reaģēt no"reaģēt";
konst Sākuma ekrāns = ({ navigācija }) => {
atgriezties (

 virsraksts="Navigate to .."
 onPress={() => navigācija.navigate("Detaļas ekrāns")}
 />
 </View>
 );
};
eksportētnoklusējuma Sākuma ekrāns;
konst stili = StyleSheet.create({});

Ievērojiet, kā Stack Navigator automātiski izveido bultiņas pogu, lai pārvietotos atpakaļ uz iepriekšējiem ekrāniem.

Cilņu navigators

Dažās situācijās turp un atpakaļ navigācijas sistēma, piemēram, Stack Navigator, nenodrošina lielisku pieredzi. Šiem gadījumiem ir labāk piemērots cilnes navigators. Tas parāda lietotājam jau iepriekš pieejamos navigācijas ekrānus, un to var būt vieglāk lietot, kā tīmekļa navigācijas josla.

Lai sāktu, instalējiet @react-navigation/bottom-tabs bibliotēkas izmantošana NPM pakotņu pārvaldnieks.

Ar CreateBottomNavigator(), varat izveidot cilnes navigatora gadījumu tāpat kā ar Stack Navigator:

imports { CreateBottomTabNavigator } no"@react-navigation/bottom-tabs";
konst Tab = izveidotBottomTabNavigator();

Pēc tam definējiet ekrānus, kurus vēlaties izmantot kā cilnes navigatorā un Navigācijas konteiners:

eksportētnoklusējumafunkcijuApp() {
atgriezties (


 vārds ="Mājas"
 komponents={HomeScreen}
 opcijas={{ virsraksts: "Mājas" }}
 />
 vārds ="Profils"
 komponents={ProfileScreen}
 opcijas={{ virsraksts: "Profils" }}
 />
 vārds ="Detaļas"
 komponents={DetailScreen}
 opcijas={{ virsraksts: "Detaļas" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Palaižot lietotni, jums vajadzētu redzēt cilnes navigatoru ar definētajiem ekrāniem apakšā.

Jūs varētu izmantot cilnes joslas pozīcija oiespēju novietot navigatoru pie tops, pa labi, pa kreisi, vai apakšā (noklusējums).

Atvilktņu navigators

Atvilktņu navigatori jeb atvilktnes ir izplatīts navigācijas modelis mobilajās lietojumprogrammās. Atvilktnes var atvērt, velkot vai pieskaroties pogai. Tas liek atvilktnei ieslīdēt no ekrāna malas, atklājot tās saturu.

Lai izmantotu Drawer Navigator, instalējiet to kopā ar reaģēt-native-žestu apstrādātājs un reaģēt-native-reanimated:

npm instalēt @react-navigation/drawer
npm instalēt react-native-gesture-handler react-native-reanimated

Jums būs arī jākonfigurē reanimācija savā iekšienē babel.config.js fails:

modulis.exports = {
 sākotnējie iestatījumi: ["babel-preset-expo"],
 spraudņi: ["react-native-reanimated/plugin"],
};

Šeit ir piemērs, kā iestatīt atvilktņu navigatoru:

imports"reaģēt-native-žestu apstrādātājs"; // Šim importam ir jābūt augšpusē
imports { Skats, teksts, poga } no"reaģēt-native";
imports { CreateDrawerNavigator } no"@react-navigation/drawer";
imports { NavigationContainer } no"@react-navigation/native";
konst Drawer = CreateDrawerNavigator();
konst DrawerContent = ({ navigācija }) => {
atgriezties (
flex: 1, alignItems: "centrs", justifyContent: "centrs" }}>
fonta izmērs: 24, fontsWeight: "drosmīgs" }}>
 Laipni lūdzam atvilktnē
 </Text>

 Šis ir papildu saturs, ko varat parādīt iekšā atvilktne.
 </Text>
"Aizvērt atvilktni" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konst Lietotne = () => (

 originalRouteName="Mājas"
 dragerContent={(rekvizīti) => <Atvilktņu saturs {...rekvizīti} />}
 >
 {/* Citi jūsu ekrāni šeit */}
 </Drawer.Navigator>
 </NavigationContainer>
);
eksportētnoklusējuma Lietotne;

Šajā piemērā Atvilktņu saturs komponents tiek nodots kā atvilktneSaturs prop to CreateDrawerNavigator. Iekšpusē Atvilktņu saturs komponentu, varat pielāgot saturu, lai parādītu vēlamo informāciju, izmantojot teksta komponentus vai citus elementus un stilu.

Cilņu navigatori ir statiski un vienmēr redzami. Tas ne vienmēr ir labākais, jo cilnes bloķē ekrāna daļas un var novērst fokusu no galvenā ekrāna. Varat izmantot atvilktnes kā dinamisku ciļņu navigatoru un izveidot atvilktnēs navigācijas izvēlni. Pēc tam lietotāji var atvērt atvilktni, lai atrastu navigācijas izvēlni.

Varat arī izmantot atvilktni, lai parādītu papildu saturu, piemēram, meklēšanas joslu, lietotāja profilu, kontekstuālo informāciju vai jebko, kam nav nepieciešams pilnekrāna skats.

Apsveriet šo paraugpraksi, lai maksimāli izmantotu atvilktņu navigatoru:

• Nepārslogojiet atvilktni ar pārāk daudzām iespējām un koncentrējieties uz visatbilstošāko un biežāk izmantoto funkciju prezentāciju.
• Loģiski un intuitīvi klasificējiet saistītos vienumus kategorijās, lai palīdzētu lietotājiem ātri atrast to, ko viņi meklē.
• Izmantojiet ikonas vai vizuālus indikatorus, lai palīdzētu lietotājiem saprast katra atvilktnē esošā vienuma mērķi.

Datu nodošana ar navigācijas balstiem

React Navigation nodrošina jaudīgu mehānismu, kas ļauj nosūtīt datus, izmantojot navigācijas rekvizītus.

Apsveriet situāciju, kad vienā ekrānā ir vienumu saraksts un, kad lietotājs atlasa vienumu, jūs vēlaties nodot attiecīgos datus citam ekrānam.

Pirmkārt, jums ir jādefinē navigācijas struktūra. Tagad, lai nodotu datus no Sākuma ekrāns uz a DetailScreen kad ir atlasīts vienums, iekšpusē Sākuma ekrāns definējiet funkciju, kas apstrādā navigāciju un ietver datus, kurus vēlaties nodot.

imports Reaģēt no'reaģēt';
imports { Skats, teksts, poga } no'react-native';
konst Sākuma ekrāns = ({ navigācija }) => {
konst handItemPress = (lieta) => {
 navigation.navigate("DetailScreen", { lieta });
 };
atgriezties (

Saraksts no Preces </Text>
"1. vienums" onPress={() => handleItemPress(“1. vienuma dati”)} />
"2. vienums" onPress={() => handleItemPress(“2. vienuma dati”)} />
 </View>
 );
};
eksportētnoklusējuma Sākuma ekrāns;

The handItemPress funkcija izmanto navigācija.navigēt metode, lai pārvietotos uz DetailScreen vienlaikus nododot atlasītās preces datus kā parametru otrajā argumentā.

Lai varētu piekļūt nodotajiem datiem iekšā DetailScreen komponents, jums būs nepieciešams navigācija rekvizīts:

imports Reaģēt no'reaģēt';
imports { Skats, Teksts } no'react-native';
konst DetailScreen = ({ navigācija }) => {
konst item = navigation.getParam('lieta', '');
atgriezties (

Detaļu ekrāns</Text>
{item}</Text>
 </View>
 );
};
eksportētnoklusējuma DetailScreen;

Lūk, DetailScreen komponentu lietojumi navigation.getParam lai izgūtu nokārtoto vienumu no navigācijas rekvizītiem. Šajā piemērā ir iestatīta tukšas virknes noklusējuma vērtība, ja dati nav pieejami. Tādā veidā jūsu lietotne neavarēs renderēšanas laikā.

Atkarībā no jūsu lietotnes sarežģītības, varat izpētīt, izmantojot valsts pārvaldības bibliotēkas, piemēram, Redux vai konteksta API, lai pārvaldītu un koplietotu datus globāli.

Navigācijas koda sakārtošana

Pareiza navigācijas koda organizēšana palīdzēs izveidot mērogojamu un sadarbīgu React Native lietotni. To var izdarīt, sadalot navigācijas loģiku pārvaldāmos moduļos. Tas padarīs to viegli lasāmu un saprotamu.

Izmantojot to, varat būt pārliecināti, ka lietotājiem radīsiet netraucētu navigāciju, vienlaikus izbaudot izstrādes pieredzi.