Lär dig hur du kan bygga ett stabilt navigationssystem för din React Native-app med hjälp av React Navigation-biblioteket.

Mobilappar bör ha ett navigationssystem som guidar användare utan ansträngning genom olika skärmar och funktioner.

React Navigation, ett kraftfullt och flexibelt navigationsbibliotek för React Native, kan hjälpa dig att skapa den upplevelsen. Genom att utnyttja dess kapacitet kan du enkelt konstruera ett fantastiskt mobilt navigationssystem.

Installera React Navigation Library

React Navigation erbjuder tre huvudnavigeringsmönster, nämligen Stack-, Tab- och Drawer-navigering för att bygga ett navigationssystem. Dessa navigeringsmönster ger ett ramverk för att organisera och hantera navigering mellan olika skärmar i din app.

För att komma igång med React Navigation, installera biblioteket och dess nödvändiga beroenden:

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

Konfigurera en navigator

Varje navigator inom React Navigation bor i sitt eget separata bibliotek. För att använda någon av navigatorerna måste du installera dem individuellt.

instagram viewer

En genomtänkt projektstruktur är användbar när du bygger ett navigationssystem för din mobilapp. En bra praxis är att skapa en src mapp i ditt projekts rotkatalog. Inuti den här mappen bör du ha en skärmar mapp. Detta kommer att tjäna till att separera dina skärmkomponenter från andra komponenter.

Du kommer att skriva ut koden för att ställa in navigeringsmönstret du använder i ditt projekt App.js fil.

Skapa en navigator inuti App.js fil är en bästa praxis av flera anledningar:

  • De App.js fil är vanligtvis toppnivåkomponenten i en React Native-app. Att definiera Navigator i den här filen kommer att säkerställa att navigeringshierarkin är på ditt komponentträds högsta nivå och tillgänglig genomgående.
  • Placera Navigatorn i App.js fil kan du enkelt komma åt och skicka ned app-omfattande tillstånd och rekvisita till skärmarna i navigatorn.
  • Reager Navigation's Navigationsbehållare ger det nödvändiga sammanhanget för navigering och är vanligtvis placerad inuti App.js. Genom att placera Navigator i samma fil kan du enkelt integrera den med Navigationsbehållare.

Stack Navigator

Stack Navigator är det mest populära navigeringsmönstret inom React Navigation-biblioteket. Den använder en stackdatastruktur där varje skärm är en helt annan komponent och staplas ovanpå den föregående.

När en ny skärm skjuts ovanpå stapeln blir den den aktiva skärmen och den föregående skärmen kastas under den. Detta tillåter användare att navigera fram och tillbaka genom stacken, som en webbplatss navigeringsflöde. Du kan ställ in stacknavigatorn för att gå från en skärm till en annan.

Till exempel:

importera Reagera från'reagera';
importera { NavigationContainer } från'@react-navigation/native';
importera { createStackNavigator } från'@react-navigation/stack';
// Importera dina skärmkomponenter
importera Hemskärm från'./skärmar/Hemskärm';
importera Detaljer Skärm från'./screens/DetailsScreen';


konst Stack = createStackNavigator();


konst App = () => {
lämna tillbaka (


"Hem" component={Hemskärm} />
"Detaljer" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
exporterastandard App;

Ovanstående kodblock skapar en Stack Navigator-komponent med hjälp av createStackNavigator() från navigationsbiblioteket.

I det här exemplet har Stack Navigator två skärmar: Hem och Detaljer.

Installera nu Stack Navigator:

npm installera @react-navigation/stack

Inuti Hemskärm, kan du använda navigering objekt för att testa Stack Navigator:

importera { StyleSheet, View, Button } från"reagera-native";
importera Reagera från"reagera";
konst Hemskärm = ({ navigering }) => {
lämna tillbaka (

 titel="Navigera till .."
 onPress={() => navigation.navigate("Detaljskärm")}
 />
 </View>
 );
};


exporterastandard Hemskärm;
konst styles = StyleSheet.create({});
2 bilder

Lägg märke till hur Stack Navigator automatiskt skapar en pilknapp för att hantera tillbakanavigering till föregående skärmar.

Tab Navigator

I vissa situationer ger det inte en fantastisk upplevelse att ha ett fram och tillbaka navigationssystem som Stack Navigator. En Tab Navigator är bättre lämpad för dessa fall. Den visar navigationsskärmarna som är tillgängliga i förväg för användaren och kan vara enklare att använda, som ett webbnavigeringsfält.

För att komma igång, installera @react-navigation/bottom-tabs biblioteket använder NPM-pakethanteraren.

Med createBottomNavigator(), kan du skapa en instans av Tab Navigator som du gjorde med Stack Navigator:

importera { createBottomTabNavigator } från'@react-navigation/bottom-tabs';
konst Tab = createBottomTabNavigator();

Och definiera sedan de skärmar du vill ha som flikar i navigatorn och Navigationsbehållare:

exporterastandardfungeraApp() {
lämna tillbaka (


 namn="Hem"
 component={Hemskärm}
 alternativ={{ titel: "Hem" }}
 />
 namn="Profil"
 component={ProfileScreen}
 alternativ={{ titel: "Profil" }}
 />
 namn="Detaljer"
 component={DetailScreen}
 alternativ={{ titel: "Detaljer" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

När du kör din app bör du se en Tab Navigator med dina definierade skärmar längst ner.

3 bilder

Du kan använda tabBarPosition oalternativ för att placera navigatorn vid topp, höger, vänster, eller botten (standard).

Lådnavigator

Drawer Navigators, eller lådor, är ett vanligt navigeringsmönster i mobila applikationer. Du kan öppna lådorna genom att svepa eller trycka på en knapp. Detta gör att lådan glider in från sidan av skärmen och avslöjar dess innehåll.

2 bilder

För att använda Drawer Navigator, installera den tillsammans med reagera-infödd-gest-hanterare och reagera-native-reanimated:

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

Du måste också konfigurera reanimated inuti din babel.config.js fil:

modul.exports = {
 förinställningar: ["babel-preset-expo"],
 plugins: ["reagera-native-reanimated/plugin"],
};

Här är ett exempel på hur man ställer in en Drawer Navigator:

importera"reagera-infödd-gest-hanterare"; // Denna import måste vara överst
importera { Visa, text, knapp } från"reagera-native";
importera { createDrawerNavigator } från"@react-navigation/drawer";
importera { NavigationContainer } från"@react-navigation/native";


konst Drawer = createDrawerNavigator();


konst DrawerContent = ({ navigering }) => {
lämna tillbaka (
böja: 1, alignItems: "Centrum", motivera innehåll: "Centrum" }}>
textstorlek: 24, typsnitt Vikt: "djärv" }}>
 Välkommen till lådan
 </Text>

 Det här är lite extra innehåll som du kan visa i lådan.
 </Text>


konst App = () => (

 initialRouteName="Hem"
 drawerContent={(rekvisita) => <DrawerContent {...rekvisita} />}
 >
 {/* Dina andra skärmar här */}
 </Drawer.Navigator>
 </NavigationContainer>
);
exporterastandard App;

I det här exemplet är DrawerContent komponenten godkänns som lådaInnehåll stötta till skapa DrawerNavigator. Inuti DrawerContent komponent kan du anpassa innehållet för att visa önskad information med hjälp av textkomponenter eller andra element och stil.

Fliknavigatorer är statiska och alltid synliga. Detta är inte alltid det bästa, eftersom flikarna blockerar delar av skärmen och kan ta bort fokus från huvudskärmen. Du kan använda lådor som en dynamisk fliknavigator och skapa en navigeringsmeny i lådorna. Användare kan sedan öppna lådan för att hitta en navigeringsmeny.

Du kan också använda lådan för att visa ytterligare innehåll som ett sökfält, en användarprofil, kontextuell information eller något som inte kräver en helskärmsvy.

Överväg dessa bästa metoder för att få ut det mesta av Drawer Navigator:

  • Undvik att överväldiga lådan med för många alternativ och fokusera på att presentera de mest relevanta och ofta använda funktionerna.
  • Kategorisera relaterade objekt logiskt och intuitivt för att hjälpa användare att snabbt hitta det de letar efter.
  • Använd ikoner eller visuella indikatorer för att hjälpa användare att förstå syftet med varje föremål i lådan.

Skickar data med navigeringsrekvisita

React Navigation tillhandahåller en kraftfull mekanism som gör att du kan skicka data genom navigationsrekvisita.

Tänk på ett scenario där du har en lista med objekt på en skärm och när en användare väljer ett objekt vill du skicka motsvarande data till en annan skärm.

Först måste du definiera din navigeringsstruktur. Nu, för att skicka data från Hemskärm till a Detaljskärm när ett objekt väljs, inuti Hemskärm definiera en funktion som hanterar navigeringen och inkluderar de data du vill skicka.

importera Reagera från'reagera';
importera { Visa, text, knapp } från"reagera-native";
konst Hemskärm = ({ navigering }) => {
konst handleItemPress = (Artikel) => {
 navigation.navigate('Detaljskärm', { Artikel });
 };


lämna tillbaka (

Lista av Objekt</Text>
exporterastandard Hemskärm;

De handleItemPress funktionen använder navigation.navigera metod för att navigera till Detaljskärm samtidigt som den markerade artikeldatan skickas som en parameter i det andra argumentet.

För att kunna komma åt de överförda data inuti Detaljskärm komponent kommer du att behöva navigering stötta:

importera Reagera från'reagera';
importera { Visa, text } från"reagera-native";
konst Detaljskärm = ({ navigering }) => {
konst item = navigation.getParam('Artikel', '');


lämna tillbaka (

Detaljskärm</Text>
{item}</Text>
 </View>
 );
};
exporterastandard Detaljskärm;

Här, den Detaljskärm komponentanvändningar navigation.getParam för att hämta det passerade objektet från navigationsrekvisitan. I det här exemplet ställs ett standardvärde för en tom sträng in om data inte är tillgänglig. På så sätt kraschar inte din app vid rendering.

Beroende på hur komplex din app är, du kan utforska med hjälp av statliga förvaltningsbibliotek som Redux eller context API för att hantera och dela data globalt.

Organisera din navigeringskod

Att organisera din navigeringskod på rätt sätt hjälper dig att bygga en skalbar och samarbetsbar React Native-app. Du kan göra detta genom att dela upp navigeringslogiken i hanterbara moduler. Detta kommer att göra det lätt att läsa och förstå.

Med detta kan du vara säker på att skapa sömlös navigering för dina användare samtidigt som du njuter av utvecklingsupplevelsen.