Hoe een mobiel navigatiesysteem te bouwen met React Navigation

Mobiele apps moeten een navigatiesysteem hebben dat gebruikers moeiteloos door verschillende schermen en functionaliteiten loodst.

React Navigation, een krachtige en flexibele navigatiebibliotheek voor React Native, kan u helpen die ervaring te creëren. Door de mogelijkheden ervan te benutten, kunt u moeiteloos een geweldig mobiel navigatiesysteem bouwen.

De React-navigatiebibliotheek installeren

React Navigation biedt drie hoofdnavigatiepatronen, namelijk de Stack-, Tab- en Drawer-navigatie voor het bouwen van een navigatiesysteem. Deze navigatiepatronen bieden een raamwerk voor het organiseren en beheren van navigatie tussen verschillende schermen binnen uw app.

Om aan de slag te gaan met React Navigation, installeert u de bibliotheek en de benodigde afhankelijkheden:

npm install @react-navigation/native
npm installeer reactie-native-schermen reactie-native-veilige-gebied-context

Een navigator instellen

Elke navigator binnen React Navigation leeft in zijn eigen afzonderlijke bibliotheek. Om een ​​van de navigators te gebruiken, moet u ze afzonderlijk installeren.

Een doordachte projectstructuur is handig bij het bouwen van een navigatiesysteem voor je mobiele app. Een goede gewoonte is om een src map in de hoofdmap van uw project. In deze map zou je een schermen map. Dit zal dienen om uw schermcomponenten te scheiden van andere componenten.

U schrijft de code om het navigatiepatroon in te stellen dat u binnen uw project gebruikt App.js bestand.

Een Navigator maken in het App.js bestand is om verschillende redenen een best practice:

• De App.js -bestand is meestal de component op het hoogste niveau in een React Native-app. Het definiëren van de Navigator in dit bestand zorgt ervoor dat de navigatiehiërarchie zich op het hoogste niveau van uw componentenboom bevindt en overal toegankelijk is.
• Het plaatsen van de Navigator in de App.js Met het bestand kunt u eenvoudig app-brede status en rekwisieten openen en doorgeven aan de schermen in de navigator.
• Reageren Navigatie's NavigatieContainer biedt de nodige context voor navigatie en bevindt zich doorgaans binnenin App.js. Door de Navigator in hetzelfde bestand te plaatsen, kunt u deze eenvoudig integreren met de NavigatieContainer.

Stapel Navigator

De Stack Navigator is het populairste navigatiepatroon binnen de React Navigation-bibliotheek. Het maakt gebruik van een stapelgegevensstructuur waarbij elk scherm een ​​compleet ander onderdeel is en bovenop het vorige wordt gestapeld.

Wanneer een nieuw scherm bovenop de stapel wordt geschoven, wordt dit het actieve scherm en wordt het vorige scherm eronder gegooid. Hierdoor kunnen gebruikers heen en weer navigeren door de stapel, zoals de navigatiestroom van een website. Jij kan stel de stapelnavigator in om van het ene scherm naar het andere te gaan.

Bijvoorbeeld:

importeren Reageer van'Reageer';
importeren { NavigatieContainer } van'@react-navigatie/native';
importeren { createStackNavigator } van'@react-navigatie/stack';
// Importeer uw schermcomponenten
importeren Thuis scherm van'./schermen/HomeScreen';
importeren DetailsScherm van'./screens/DetailsScreen';
const Stapel = createStackNavigator();
const App= () => {
opbrengst (


"Thuis" component={Startscherm} />
"Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exporterenstandaard App;

Het bovenstaande codeblok maakt een Stack Navigator-component met behulp van createStackNavigator() uit de navigatiebibliotheek.

In dit voorbeeld heeft de Stack Navigator twee schermen: Thuis En Details.

Installeer nu de Stack Navigator:

npm install @react-navigatie/stack

Binnen Thuis scherm, kunt u de navigatie object om de Stack Navigator te testen:

importeren { StyleSheet, Weergave, Knop } van"reageren-native";
importeren Reageer van"Reageer";
const Startscherm = ({ navigatie }) => {
opbrengst (

 titel="Navigeren naar .."
 onPress={() => navigatie.navigate("Detailscherm")}
 />
 </View>
 );
};
exporterenstandaard Thuis scherm;
const stijlen = StyleSheet.create({});

Merk op hoe de Stack Navigator automatisch een pijlknop maakt om terug naar de vorige schermen te navigeren.

Tab Navigator

In sommige situaties biedt het hebben van een heen-en-weer navigatiesysteem zoals de Stack Navigator geen geweldige ervaring. Een Tab Navigator is beter geschikt voor deze gevallen. Het geeft de navigatieschermen weer die vooraf beschikbaar zijn voor de gebruiker en kan gemakkelijker te gebruiken zijn, zoals een webnavigatiebalk.

Installeer om te beginnen het @react-navigatie/bottom-tabs bibliotheek gebruiken de NPM-pakketbeheerder.

Met createBottomNavigator(), kunt u een exemplaar van de Tab Navigator maken zoals u deed met de Stack Navigator:

importeren { createBottomTabNavigator} van'@react-navigatie/bottom-tabs';
const Tabblad = createBottomTabNavigator();

En definieer vervolgens de gewenste schermen als tabbladen in de navigator en NavigatieContainer:

exporterenstandaardfunctieapp() {
opbrengst (


 naam="Thuis"
 component={Startscherm}
 opties={{ titel: "Thuis" }}
 />
 naam="Profiel"
 component={Profielscherm}
 opties={{ titel: "Profiel" }}
 />
 naam="Details"
 component={DetailScreen}
 opties={{ titel: "Details" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

Wanneer u uw app uitvoert, zou u onderaan een Tab Navigator moeten zien met uw gedefinieerde schermen.

Je zou de tabBarPosition oOptie om de navigator op de plaats te zetten bovenkant, rechts, links, of onderkant (standaard).

Lade Navigator

Lade-navigators, of lades, zijn een veelvoorkomend navigatiepatroon in mobiele applicaties. Je opent de lades door op een knop te swipen of te tikken. Hierdoor schuift de lade vanaf de zijkant van het scherm naar binnen, waardoor de inhoud zichtbaar wordt.

Om de Drawer Navigator te gebruiken, installeert u deze samen met reactie-native-gebaar-handler En reactie-native-gereanimeerd:

npm install @react-navigatie/lade
npm install reactie-native-gesture-handler reactie-native-gereanimeerd

U moet ook gereanimeerd configureren in uw babel.config.js bestand:

moduul.export = {
 voorinstellingen: ["babel-preset-expo"],
 plug-ins: ["react-native-gereanimeerd/plug-in"],
};

Hier is een voorbeeld van het opzetten van een Lade Navigator:

importeren"reageren-native-gebaren-handler"; // Deze import moet bovenaan staan
importeren { Bekijken, Tekst, Knop } van"reageren-native";
importeren { createDrawerNavigator } van"@react-navigatie/lade";
importeren { NavigatieContainer } van"@react-navigatie/native";
const Lade = createDrawerNavigator();
const Lade-inhoud = ({ navigatie }) => {
opbrengst (
buigen: 1, alignItems: "centrum", rechtvaardigenInhoud: "centrum" }}>
lettertypegrootte: 24, lettertype dikte: "vetgedrukt" }}>
 Welkom bij de Lade
 </Text>

 Dit is wat extra inhoud die u kunt weergeven in de tekenaar.
 </Text>
"Sluit Lade" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
const App= () => (

 initialRouteName="Thuis"
 drawerContent={(rekwisieten) => <LadeInhoud {...rekwisieten} />}
 >
 {/* Je andere schermen hier */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exporterenstandaard App;

In dit voorbeeld is de LadeInhoud component wordt doorgegeven als de ladeInhoud steunen op createDrawerNavigator. Binnen in de LadeInhoud component, kunt u de inhoud aanpassen om de gewenste informatie weer te geven met behulp van tekstcomponenten of andere elementen en styling.

Tabnavigators zijn statisch en altijd zichtbaar. Dit is niet altijd het beste, omdat de tabbladen delen van het scherm blokkeren en de aandacht van het hoofdscherm kunnen afleiden. U kunt lades gebruiken als dynamische tab-navigator en een navigatiemenu in de lades maken. Gebruikers kunnen vervolgens de lade openen om een ​​navigatiemenu te vinden.

U kunt de lade ook gebruiken om aanvullende inhoud weer te geven, zoals een zoekbalk, een gebruikersprofiel, contextuele informatie of iets anders waarvoor geen weergave op volledig scherm nodig is.

Overweeg deze best practices om het meeste uit de Drawer Navigator te halen:

• Voorkom dat je de la overspoelt met te veel opties en concentreer je op het presenteren van de meest relevante en meest gebruikte functies.
• Categoriseer gerelateerde items logisch en intuïtief om gebruikers te helpen snel te vinden wat ze zoeken.
• Gebruik pictogrammen of visuele indicatoren om gebruikers te helpen het doel van elk item in de la te begrijpen.

Gegevens doorgeven met navigatiesteunen

React Navigation biedt een krachtig mechanisme waarmee u gegevens door navigatie-rekwisieten kunt doorgeven.

Overweeg een scenario waarin u een lijst met items op één scherm heeft en wanneer een gebruiker een item selecteert, wilt u de bijbehorende gegevens doorgeven aan een ander scherm.

Eerst moet u uw navigatiestructuur definiëren. Nu, om gegevens door te geven van de Thuis scherm naar een Detailscherm wanneer een item is geselecteerd, binnen Thuis scherm definieer een functie die de navigatie afhandelt en de gegevens bevat die u wilt doorgeven.

importeren Reageer van'Reageer';
importeren { Bekijken, Tekst, Knop } van'reageren-native';
const Startscherm = ({ navigatie }) => {
const handleItemDruk = (item) => {
 navigatie.navigatie('Detailscherm', { artikel });
 };
opbrengst (

Lijst van Artikelen</Text>
"Item 1" onPress={() => handleItemPress('Artikel 1 Gegevens')} />
"Artikel 2" onPress={() => handleItemPress('Artikel 2 gegevens')} />
 </View>
 );
};
exporterenstandaard Thuis scherm;

De handvatItemDruk functie maakt gebruik van de navigatie.navigeren methode om naar de Detailscherm terwijl de gegevens van het geselecteerde item worden doorgegeven als een parameter in het tweede argument.

Om toegang te krijgen tot de doorgegeven gegevens in de Detailscherm component, heb je de navigatie steun:

importeren Reageer van'Reageer';
importeren {Bekijken, Tekst} van'reageren-native';
const Detailscherm = ({ navigatie }) => {
const item = navigatie.getParam('item', '');
opbrengst (

Detailscherm</Text>
{item}</Text>
 </View>
 );
};
exporterenstandaard Detailscherm;

Hier de Detailscherm component gebruikt navigatie.getParam om het gepasseerde item op te halen uit de navigatie-rekwisieten. In dit voorbeeld wordt een standaardwaarde van een lege tekenreeks ingesteld voor het geval de gegevens niet beschikbaar zijn. Op deze manier crasht je app niet bij het renderen.

Afhankelijk van de complexiteit van uw app, u kunt verkennen met behulp van staatsbeheerbibliotheken zoals Redux of de context-API om gegevens wereldwijd te beheren en te delen.

Uw navigatiecode ordenen

Door uw navigatiecode goed te organiseren, kunt u een schaalbare en collaboratieve React Native-app bouwen. U kunt dit doen door de navigatielogica op te splitsen in beheersbare modules. Dit maakt het gemakkelijk te lezen en te begrijpen.

Hiermee kunt u er zeker van zijn dat u naadloze navigatie voor uw gebruikers creëert terwijl u geniet van de ontwikkelingservaring.