Kaip sukurti mobiliąją navigacijos sistemą naudojant „React Navigation“.

Programėlės mobiliesiems turėtų turėti navigacijos sistemą, kuri be vargo nukreiptų naudotojus per įvairius ekranus ir funkcijas.

„React Navigation“, galinga ir lanksti „React Native“ naršymo biblioteka, gali padėti sukurti tokią patirtį. Išnaudoję jos galimybes, galite be vargo sukurti puikią mobiliąją navigacijos sistemą.

„React“ naršymo bibliotekos įdiegimas

„React Navigation“ siūlo tris pagrindinius naršymo modelius, būtent „Stack“, „Tab“ ir „Stalčiaus“ naršymą, kad sukurtumėte navigacijos sistemą. Šie naršymo modeliai suteikia pagrindą naršymui tarp skirtingų programos ekranų tvarkyti ir valdyti.

Norėdami pradėti naudoti „React Navigation“, įdiekite biblioteką ir būtinas jos priklausomybes:

npm įdiegti @react-navigation/native
npm įdiegti react-native-screens react-native-safe-area-context

Navigatoriaus nustatymas

Kiekvienas „React Navigation“ navigatorius yra atskiroje bibliotekoje. Norėdami naudoti bet kurį iš navigatorių, turėsite juos įdiegti atskirai.

Gerai apgalvota projekto struktūra yra naudinga kuriant mobiliosios programėlės navigacijos sistemą. Gera praktika yra sukurti an src aplanką savo projekto šakniniame kataloge. Šiame aplanke turėtumėte turėti a ekranai aplanką. Tai padės atskirti ekrano komponentus nuo kitų komponentų.

Išrašysite kodą, kad nustatytumėte naršymo šabloną, kurį naudojate savo projekte App.js failą.

Navigatoriaus kūrimas viduje App.js failas yra geriausia praktika dėl kelių priežasčių:

• The App.js failas paprastai yra aukščiausio lygio „React Native“ programos komponentas. Naršyklės apibrėžimas šiame faile užtikrins, kad naršymo hierarchija yra aukščiausiame komponentų medžio lygyje ir pasiekiama visame.
• Navigatoriaus įdėjimas į App.js failas leidžia lengvai pasiekti ir perduoti visos programos būseną ir rekvizitus į navigatoriaus ekranus.
• Reaguoti navigaciją Navigacijos konteineris suteikia navigacijai būtiną kontekstą ir paprastai yra viduje App.js. Įdėję navigatorių į tą patį failą, galite lengvai integruoti jį su Navigacijos konteineris.

Stack Navigator

„Stack Navigator“ yra populiariausias „React Navigation“ bibliotekos naršymo modelis. Jame naudojama krūvos duomenų struktūra, kai kiekvienas ekranas yra visiškai skirtingas komponentas ir yra sukrautas ant ankstesnio.

Kai naujas ekranas pastumiamas ant krūvos viršaus, jis tampa aktyviu ekranu, o ankstesnis ekranas išmetamas po juo. Tai leidžia vartotojams naršyti pirmyn ir atgal per krūvą, kaip ir svetainės naršymo srautą. Tu gali nustatykite kamino navigatorių, kad galėtumėte pereiti iš vieno ekrano į kitą.

Pavyzdžiui:

importuoti Reaguoti iš'reaguoti';
importuoti { NavigationContainer } iš„@react-navigation/native“;
importuoti { CreateStackNavigator } iš„@react-navigation/stack“;
// Importuokite ekrano komponentus
importuoti Pradinis ekranas iš'./screens/HomeScreen';
importuoti Išsami informacijaEkranas iš'./screens/DetailsScreen';
konst Stack = CreateStackNavigator();
konst Programa = () => {
grąžinti (


"Namai" Component={HomeScreen} />
"Detalės" Component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
eksportuotinumatytas Programėlė;

Aukščiau pateiktas kodo blokas sukuria „Stack Navigator“ komponentą naudojant CreateStackNavigator() iš navigacijos bibliotekos.

Šiame pavyzdyje „Stack Navigator“ turi du ekranus: Namai ir Detalės.

Dabar įdiekite „Stack Navigator“:

npm įdiegti @react-navigation/stack

Viduje Pradinis ekranas, galite naudoti navigacija objektas, skirtas išbandyti Stack Navigator:

importuoti { Style Sheet, View, Button } iš"reaguoja - gimtoji";
importuoti Reaguoti iš"reaguoti";
konst Pagrindinis ekranas = ({ navigacija }) => {
grąžinti (

 pavadinimas ="Navigate to .."
 onPress={() => navigacija.navigate("DetailScreen")}
 />
 </View>
 );
};
eksportuotinumatytas Pradinis ekranas;
konst stiliai = StyleSheet.create({});

Atkreipkite dėmesį, kaip „Stack Navigator“ automatiškai sukuria rodyklės mygtuką, kad būtų galima grįžti į ankstesnius ekranus.

Skirtukų navigatorius

Kai kuriais atvejais pirmyn ir atgal navigacijos sistema, pvz., Stack Navigator, nesuteikia puikios patirties. Šiems atvejams geriau tinka skirtukų navigatorius. Jame rodomi naršymo ekranai, pasiekiami vartotojui iš anksto ir gali būti lengviau naudojami, kaip žiniatinklio naršymo juosta.

Norėdami pradėti, įdiekite @react-navigation/bottom-tabs bibliotekos naudojimas NPM paketų tvarkyklė.

Su CreateBottomNavigator(), galite sukurti skirtukų navigatoriaus egzempliorių, kaip tai padarėte naudodami dėklo navigatorių:

importuoti { CreateBottomTabNavigator } iš„@react-navigation/bottom-tabs“;
konst Tab = CreateBottomTabNavigator();

Tada nustatykite norimus ekranus kaip skirtukus naršymo priemonėje ir Navigacijos konteineris:

eksportuotinumatytasfunkcijaProgramėlė() {
grąžinti (


 vardas ="Namai"
 Component={HomeScreen}
 parinktys={{ titulą: "Namai" }}
 />
 vardas ="Profilis"
 Component={ProfileScreen}
 parinktys={{ titulą: "Profilis" }}
 />
 vardas ="Detalės"
 Component={DetailScreen}
 parinktys={{ titulą: "Detalės" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Vykdydami programą turėtumėte matyti skirtukų navigatorių su apibrėžtais ekranais apačioje.

Galite naudoti tabBarPosition oparinktis nustatyti navigatorių ties viršuje, teisingai, paliko, arba apačioje (numatytas).

Stalčių navigatorius

Stalčių navigatoriai arba stalčiai yra įprastas mobiliųjų programų naršymo modelis. Stalčius galite atidaryti braukdami arba bakstelėdami mygtuką. Dėl to stalčius slysta iš ekrano šono ir atsiskleidžia jo turinys.

Norėdami naudoti Drawer Navigator, įdiekite jį kartu su reaguoti-gimtoji-gestų tvarkytojas ir reaguoti-gimtoji-reanimuoti:

npm įdiegti @react-navigation/drawer
npm įdiegti react-native-gesture-handler react-native-reanimated

Taip pat turėsite sukonfigūruoti reanimaciją savo viduje babel.config.js failas:

modulis.exports = {
 išankstiniai nustatymai: ["Babel-preset-expo"],
 papildiniai: ["reaguoti-native-reanimated/plugin"],
};

Štai pavyzdys, kaip nustatyti stalčių navigatorių:

importuoti„reaguoti-natyvus-gestų tvarkytojas“; // Šis importavimas turi būti viršuje
importuoti { Rodinys, tekstas, mygtukas } iš"reaguoja - gimtoji";
importuoti { CreateDrawerNavigator } iš„@react-navigation/drawer“;
importuoti { NavigationContainer } iš„@react-navigation/native“;
konst Drawer = sukurtiDrawerNavigator();
konst DrawerContent = ({ navigacija }) => {
grąžinti (
lankstus: 1, sulygintiItems: "centras", pateisintiTurinį: "centras" }}>
šrifto dydis: 24, šrifto svoris: "drąsus" }}>
 Sveiki atvykę į stalčių
 </Text>

 Tai yra papildomas turinys, kurį galite rodyti in stalčių.
 </Text>
"Uždaryti stalčių" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konst Programa = () => (

 inicialusRouteName="Namai"
 DraderContent={(rekvizitai) => <Stalčių turinys {...rekvizitas} />}
 >
 {/* Kiti jūsų ekranai čia */}
 </Drawer.Navigator>
 </NavigationContainer>
);
eksportuotinumatytas Programėlė;

Šiame pavyzdyje Stalčių turinys komponentas perduodamas kaip stalčiusTurinys remti į CreateDrawerNavigator. Viduje Stalčių turinys komponentą, galite tinkinti turinį, kad būtų rodoma norima informacija, naudodami teksto komponentus ar kitus elementus ir stilių.

Skirtukų navigatoriai yra statiniai ir visada matomi. Tai ne visada geriausia, nes skirtukai blokuoja ekrano dalis ir gali nukreipti dėmesį nuo pagrindinio ekrano. Galite naudoti stalčius kaip dinamišką skirtukų naršymo priemonę ir stalčiuose sukurti naršymo meniu. Tada vartotojai gali atidaryti stalčių ir rasti naršymo meniu.

Taip pat galite naudoti stalčių, kad būtų rodomas papildomas turinys, pvz., paieškos juosta, vartotojo profilis, kontekstinė informacija ar bet kas, kuriam nereikia viso ekrano rodinio.

Apsvarstykite šią geriausią praktiką, kad išnaudotumėte visas Drawer Navigator galimybes:

• Venkite perkrauti stalčių per daug galimybių ir sutelkite dėmesį į aktualiausių ir dažniausiai naudojamų funkcijų pateikimą.
• Logiškai ir intuityviai suskirstykite susijusius elementus, kad padėtumėte vartotojams greitai rasti tai, ko jie ieško.
• Naudokite piktogramas arba vaizdinius indikatorius, kad naudotojai suprastų kiekvieno stalčiuje esančio elemento paskirtį.

Duomenų perdavimas naudojant navigacijos rekvizitus

„React Navigation“ yra galingas mechanizmas, leidžiantis perduoti duomenis per navigacijos rekvizitus.

Apsvarstykite scenarijų, kai viename ekrane turite elementų sąrašą, o kai vartotojas pasirenka elementą, norite perduoti atitinkamus duomenis kitam ekranui.

Pirmiausia turite apibrėžti savo naršymo struktūrą. Dabar, norėdami perduoti duomenis iš Pradinis ekranas į a Išsamus ekranas kai pasirenkamas elementas, viduje Pradinis ekranas apibrėžti funkciją, kuri tvarko navigaciją ir apima duomenis, kuriuos norite perduoti.

importuoti Reaguoti iš'reaguoti';
importuoti { Rodinys, tekstas, mygtukas } iš'react-native';
konst Pagrindinis ekranas = ({ navigacija }) => {
konst handItemPress = (daiktas) => {
 navigation.navigate(„DetailScreen“, { elementas });
 };
grąžinti (

Sąrašas apie Daiktai </Text>
"1 elementas" onPress={() => handleItemPress(„1 elemento duomenys“)} />
"2 elementas" onPress={() => handleItemPress(„2 elemento duomenys“)} />
 </View>
 );
};
eksportuotinumatytas Pradinis ekranas;

The handItemPress funkcija naudoja navigacija.naviguoti būdas pereiti prie Išsamus ekranas perduodant pasirinktos prekės duomenis kaip parametrą antrajame argumente.

Kad būtų galima pasiekti perduotus duomenis viduje Išsamus ekranas komponentas, jums reikės navigacija rekvizitas:

importuoti Reaguoti iš'reaguoti';
importuoti { Žiūrėti, tekstas } iš'react-native';
konst DetailScreen = ({ navigacija }) => {
konst item = navigation.getParam("prekė", '');
grąžinti (

Išsamios informacijos ekranas</Text>
{elementas}</Text>
 </View>
 );
};
eksportuotinumatytas DetailScreen;

Čia, Išsamus ekranas komponentų naudojimas navigation.getParam kad gautumėte perduotą elementą iš navigacijos rekvizitų. Šiame pavyzdyje nustatyta numatytoji tuščios eilutės reikšmė, jei duomenų nėra. Tokiu būdu jūsų programa nesuges pateikiant.

Atsižvelgiant į programos sudėtingumą, galite tyrinėti naudodami valstybės valdymo bibliotekas, tokias kaip Redux arba konteksto API, kad galėtumėte valdyti ir bendrinti duomenis visame pasaulyje.

Navigacijos kodo tvarkymas

Tinkamai sutvarkę naršymo kodą padėsite sukurti keičiamo dydžio ir bendradarbiaujančią „React Native“ programą. Tai galite padaryti suskaidydami naršymo logiką į valdomus modulius. Taip bus lengva skaityti ir suprasti.

Taip galite būti tikri, kad sukursite sklandžią naršymą savo vartotojams, mėgaudamiesi kūrimo patirtimi.