Sådan bygger du et mobilt navigationssystem med React Navigation

Mobilapps bør have et navigationssystem, der uden besvær guider brugerne gennem forskellige skærme og funktioner.

React Navigation, et kraftfuldt og fleksibelt navigationsbibliotek til React Native, kan hjælpe dig med at skabe den oplevelse. Ved at udnytte dets muligheder kan du uden besvær konstruere et fantastisk mobilt navigationssystem.

Installation af React Navigation Library

React Navigation tilbyder tre hovednavigationsmønstre, nemlig stak-, fane- og skuffenavigation til at bygge et navigationssystem. Disse navigationsmønstre giver en ramme for organisering og styring af navigation mellem forskellige skærme i din app.

For at komme i gang med at bruge React Navigation skal du installere biblioteket og dets nødvendige afhængigheder:

npm installer @react-navigation/native
npm installer react-native-skærme react-native-safe-area-context

Opsætning af en Navigator

Hver navigator i React Navigation bor i sit eget separate bibliotek. For at bruge nogen af ​​navigatorerne skal du installere dem individuelt.

En gennemtænkt projektstruktur er nyttig, når du bygger et navigationssystem til din mobilapp. En god praksis er at skabe en src mappe i dit projekts rodmappe. Inde i denne mappe skal du have en skærme folder. Dette vil tjene til at adskille dine skærmkomponenter fra andre komponenter.

Du vil skrive koden ud for at opsætte det navigationsmønster, du bruger inde i dit projekt App.js fil.

Oprettelse af en Navigator inde i App.js fil er en bedste praksis af flere årsager:

• Det App.js fil er typisk komponenten på øverste niveau i en React Native-app. Definering af Navigator i denne fil vil sikre, at navigationshierarkiet er på dit komponenttræs højeste niveau og tilgængelig overalt.
• Placering af Navigator i App.js fil giver dig mulighed for nemt at få adgang til og videregive app-dækkende tilstand og rekvisitter til skærmene i navigatoren.
• React Navigation's Navigationscontainer giver den nødvendige kontekst til navigation og er typisk placeret inde App.js. Ved at placere Navigator i den samme fil, kan du nemt integrere den med Navigationscontainer.

Stack Navigator

Stack Navigator er det mest populære navigationsmønster i React Navigation-biblioteket. Den bruger en stak datastruktur, hvor hver skærm er en helt anden komponent og er stablet oven på den forrige.

Når en ny skærm skubbes oven på stakken, bliver den den aktive skærm, og den forrige skærm kastes under den. Dette giver brugerne mulighed for at navigere frem og tilbage gennem stakken, ligesom et websteds navigationsflow. Du kan konfigurer staknavigatoren til at skifte fra en skærm til en anden.

For eksempel:

importere Reagere fra'reagere';
importere { NavigationContainer } fra'@react-navigation/native';
importere { createStackNavigator } fra'@react-navigation/stack';
// Importer dine skærmkomponenter
importere Startskærmen fra'./skærme/HomeScreen';
importere Detaljer Skærm fra'./skærme/DetailsScreen';
konst Stack = createStackNavigator();
konst App = () => {
Vend tilbage (


"Hjem" component={HomeScreen} />
"Detaljer" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
eksportStandard App;

Ovenstående kodeblok opretter en Stack Navigator-komponent ved hjælp af createStackNavigator() fra navigationsbiblioteket.

I dette eksempel har Stack Navigator to skærme: Hjem og detaljer.

Installer nu Stack Navigator:

npm installer @react-navigation/stack

Inde Startskærmen, kan du bruge navigation objekt for at teste Stack Navigator:

importere { StyleSheet, View, Button } fra"reager-native";
importere Reagere fra"reagere";
konst Hjemmeskærm = ({ navigation }) => {
Vend tilbage (

 titel="Naviger til .."
 onPress={() => navigation.navigate("Detaljeskærm")}
 />
 </View>
 );
};
eksportStandard Startskærmen;
konst styles = StyleSheet.create({});

Bemærk, hvordan staknavigatoren automatisk opretter en pileknap til at håndtere tilbagenavigering til de foregående skærmbilleder.

Fane-navigator

I nogle situationer giver det ikke en god oplevelse at have et frem og tilbage navigationssystem som Stack Navigator. En Tab Navigator er bedre egnet til disse tilfælde. Den viser de navigationsskærme, der er tilgængelige på forhånd for brugeren og kan være nemmere at bruge, som en webnavigationslinje.

For at komme i gang skal du installere @react-navigation/bottom-tabs bibliotek ved hjælp af NPM-pakkehåndteringen.

Med createBottomNavigator(), kan du oprette en forekomst af Tab Navigator, som du gjorde med Stack Navigator:

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

Og derefter definere de skærmbilleder, du ønsker som faner i navigatoren og Navigationscontainer:

eksportStandardfungereApp() {
Vend tilbage (


 navn="Hjem"
 component={HomeScreen}
 optioner={{ titel: "Hjem" }}
 />
 navn="Profil"
 component={ProfileScreen}
 optioner={{ titel: "Profil" }}
 />
 navn="Detaljer"
 component={DetailScreen}
 optioner={{ titel: "Detaljer" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Når du kører din app, bør du se en fanebladsnavigator med dine definerede skærmbilleder i bunden.

Du kunne bruge tabBarPosition omulighed for at placere navigatoren ved top, højre, venstre, eller bund (Standard).

Skuffe Navigator

Skuffe-navigatorer eller skuffer er et almindeligt navigationsmønster i mobilapplikationer. Du kan åbne skufferne ved at stryge eller trykke på en knap. Dette får skuffen til at glide ind fra siden af ​​skærmen og afsløre dens indhold.

For at bruge Drawer Navigator skal du installere den sammen med reagere-indfødt-gest-handler og reagere-indfødt-reanimeret:

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

Du skal også konfigurere reanimated inde i din babel.config.js fil:

modul.exports = {
 forudindstillinger: ["babel-preset-expo"],
 plugins: ["react-native-reanimated/plugin"],
};

Her er et eksempel på, hvordan du opsætter en skuffenavigator:

importere"reager-native-gestik-handler"; // Denne import skal være øverst
importere { Vis, tekst, knap } fra"reager-native";
importere { createDrawerNavigator } fra"@reager-navigation/skuffe";
importere { NavigationContainer } fra"@react-navigation/native";
konst Skuffe = createDrawerNavigator();
konst Skuffeindhold = ({ navigation }) => {
Vend tilbage (
bøje: 1, alignItems: "centrum", retfærdig indhold: "centrum" }}>
skriftstørrelse: 24, skrifttypevægt: "fremhævet" }}>
 Velkommen til skuffen
 </Text>

 Dette er noget ekstra indhold, som du kan vise i skuffen.
 </Text>
"Luk skuffen" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
konst App = () => (

 initialRouteName="Hjem"
 drawerContent={(rekvisitter) => <Skuffeindhold {...rekvisitter} />}
 >
 {/* Dine andre skærme her */}
 </Drawer.Navigator>
 </NavigationContainer>
);
eksportStandard App;

I dette eksempel er Skuffeindhold komponent godkendes som skuffe Indhold støtte til oprette DrawerNavigator. Inde i Skuffeindhold komponent, kan du tilpasse indholdet til at vise den ønskede information ved hjælp af tekstkomponenter eller andre elementer og stil.

Fane-navigatorer er statiske og altid synlige. Dette er ikke altid det bedste, da fanerne blokerer dele af skærmen og kan fjerne fokus fra hovedskærmen. Du kan bruge skuffer som en dynamisk fane-navigator og oprette en navigationsmenu i skufferne. Brugere kan derefter åbne skuffen for at finde en navigationsmenu.

Du kan også bruge skuffen til at vise yderligere indhold som en søgelinje, en brugerprofil, kontekstuelle oplysninger eller noget, der ikke kræver en fuldskærmsvisning.

Overvej disse bedste fremgangsmåder for at få mest muligt ud af Drawer Navigator:

• Undgå at overvælde skuffen med for mange muligheder og fokuser på at præsentere de mest relevante og hyppigt anvendte funktioner.
• Kategoriser relaterede emner logisk og intuitivt for at hjælpe brugerne med hurtigt at finde det, de leder efter.
• Brug ikoner eller visuelle indikatorer til at hjælpe brugerne med at forstå formålet med hvert emne i skuffen.

Videregivelse af data med navigationsrekvisitter

React Navigation giver en kraftfuld mekanisme, der giver dig mulighed for at sende data gennem navigationsrekvisitter.

Overvej et scenario, hvor du har en liste over elementer på én skærm, og når en bruger vælger et element, vil du videregive de tilsvarende data til en anden skærm.

Først skal du definere din navigationsstruktur. Nu, for at videregive data fra Startskærmen til en Detaljeskærm når et element er valgt, indeni Startskærmen definere en funktion, der håndterer navigationen og inkluderer de data, du vil videregive.

importere Reagere fra'reagere';
importere { Vis, tekst, knap } fra'reager-native';
konst Hjemmeskærm = ({ navigation }) => {
konst handleItemPress = (vare) => {
 navigation.navigate('Detaljeskærm', { vare });
 };
Vend tilbage (

Liste af Varer</Text>
"Vare 1" onPress={() => handleItemPress('Vare 1-data')} />
"Vare 2" onPress={() => handleItemPress('Vare 2-data')} />
 </View>
 );
};
eksportStandard Startskærmen;

Det handleItemPress funktionen bruger navigation.navigere metode til at navigere til Detaljeskærm mens du sender de valgte varedata som en parameter i det andet argument.

For at kunne få adgang til de beståede data inde i Detaljeskærm komponent, skal du bruge navigation rekvisit:

importere Reagere fra'reagere';
importere { Vis, tekst } fra'reager-native';
konst DetailSkærm = ({ navigation }) => {
konst item = navigation.getParam('vare', '');
Vend tilbage (

Detaljeskærm</Text>
{item}</Text>
 </View>
 );
};
eksportStandard DetailSkærm;

Her, den Detaljeskærm komponentbrug navigation.getParam for at hente det beståede element fra navigationsrekvisitterne. I dette eksempel er en standardværdi for en tom streng angivet, hvis dataene ikke er tilgængelige. På denne måde går din app ikke ned ved gengivelse.

Afhængigt af kompleksiteten af ​​din app, du kan udforske ved hjælp af statsforvaltningsbiblioteker som Redux eller kontekst-API'en til at administrere og dele data globalt.

Organisering af din navigationskode

Korrekt organisering af din navigationskode vil hjælpe dig med at opbygge en skalerbar og kollaborativ React Native-app. Du kan gøre dette ved at opdele navigationslogikken i overskuelige moduler. Dette vil gøre det nemt at læse og forstå.

Med dette kan du være sikker på at skabe problemfri navigation for dine brugere, mens du nyder udviklingsoplevelsen.