Introduktion

React Native möjliggör att bygga inhemska mobilappar med JavaScript och React. En kritisk aspekt av mobilapputveckling är navigering: guidning användare genom olika skärmar och funktioner sömlöst. ]React Navigation ]] är det mest populära, community-driven biblioteket för att implementera navigering i React Native-applikationer. Det ger en deklarativ API, stöder stack, flik och riternavigatorer och hanterar plattformsspecifika gester och övergångar.

Förutsättningar och installation

Innan du använder React Navigation, se till att du har ett React Native-projekt initierat. Om du börjar färskt, använd React Native CLI eller Expo. React Navigation fungerar med båda.

Installera kärnpaket

Installera de nödvändiga paketen via npm eller garn. Kärnbiblioteket och dess huvudberoende är:

npm install @react-navigation/native

Installera sedan de stödjande biblioteken som React Navigation beror på för skärmhantering och säker hantering av området:

npm install react-native-screens react-native-safe-area-context

Om du använder Expo ingår dessa bibliotek redan. För knappa React Native-projekt följer du länkningsinstruktionerna i den officiella dokumentationen för att säkerställa att inhemska moduler är korrekt kopplade (autolinking hanterar detta för React Native 0.60+).

Installera en navigator

React Navigation erbjuder flera navigatorer. infödda stack navigator ] rekommenderas för de flesta användningsfall:

npm install @react-navigation/native-stack

Andra navigatorer som ]bottom flikar ] och ]]]]]]] installeras separat:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Kärnkoncept

React Navigation är byggd kring tre huvudbyggnadsblock:

  • ]NavigationContainer - den yttersta omslagsbrytaren som hanterar navigationsträdet och tillståndet.
  • ]Navigatorer] - komponenter som definierar navigationsmönstret (stack, flik, låda).
  • ]Screens[] – enskilda komponenter som representerar en vy eller sida i appen.

Varje navigationsinställning måste inslagas i en ]. Denna behållare är vanligtvis placerad vid roten till appkomponenten.

Ställ in en Stack Navigator

Stack navigatorn hanterar en sista-i-första-out stack av skärmar. Det använder den inhemska plattformens övergångsanimationer och gester som standard.

För det första importera nödvändiga moduler:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Skapa en stack navigator instans:

const Stack = createNativeStackNavigator();

Definiera navigatorn i din App-komponent:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

] kräver en prop (används för navigering) och en ]] prop (reagerarkomponenten för att göra).

Skapa skärmar och navigera

Skärmarna är vanliga React-komponenter. De får två viktiga rekvisita: ] och ]]]. Objektet ]] ger metoder att flytta mellan skärmar. Nedan är en typisk hemskärm:

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

Skärmen Detaljer behöver inte använda navigeringsprop om det inte behöver navigera längre.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Navigationsmetoder

React Navigation ger flera metoder via ]] prop:

  • ]navigera (namn, param) – flyttar till en skärm och återanvänder ett befintligt exempel om det finns i stacken.
  • ] tryck (namn, param) – trycker alltid på en ny skärm på stacken, även om samma skärm redan finns i stapeln.
  • ]]]goBack() navigerar till den föregående skärmen i stacken.
  • ersätter (namn, param) - ersätter den aktuella skärmen med en ny, och tar bort strömmen från historien.
  • återställer (state) - återställer hela navigationstillståndet till ett visst statligt objekt.

Till exempel, för att driva ett nytt exempel på skärmen detaljer och passera parametrar:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Passerar parametrar mellan skärmar

Data kan överföras till en skärm via det andra argumentet till ] eller ]]. Den mottagande skärmen får åtkomst till dessa parametrar genom ].

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Ange standardparametervärden med ] på skärmens komponent:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Konfigurera navigationsalternativ

Varje skärm kan anpassa sin rubrik, flikikikon, lådmärke etc., med ] prop på ] eller ]]] rekvisita på navigatorn.

Huvudmanualisering

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Dynamiska alternativ kan ställas in med hjälp av en funktion som tar emot :

options={({ route }) => ({ title: route.params.name })}

Tab Navigator

Tab navigation är vanligt för appsektioner på toppnivå. Installera navigatorns bottenflikar:

npm install @react-navigation/bottom-tabs

Skapa en flik navigator och kombinera den med din stack:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Du kan bo på fliken navigator inuti en stack navigator eller vice versa. Anpassa fliken ikoner med rekvisita med .

Drawer Navigator

En lådnavigator bildar en låda från vänster, avslöjar navigationsobjekt. Installera den:

npm install @react-navigation/drawer

Exempel inställning:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Använd för att öppna och stänga lådorna programmatiskt.

Nested Navigators

Komplexa appar ofta bo navigatorer (t.ex. en flik navigator inuti en stack navigator). React Navigation hanterar häckande graciöst. ]] prop till någon skärm kan ringa metoder på en förälder navigator om det behövs. Använd för att komma åt förälder navigator metoder.

Exempel: En stack som innehåller en flik navigator och en inställningsskärm:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Länk och djup länkning

React Navigation stöder djup länkning för att hantera webbadresser som öppnar specifika skärmar. Konfigurera ] på :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Sedan hantera inkommande URL:er. Detta gör det möjligt för funktioner som push-meddelanden som länkar till en viss skärm.

Autentiseringsflöden

Många appar kräver villkorlig navigering baserat på autentiseringstillstånd. Ett vanligt mönster är att byta navigator på rotnivå:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

Alternativt, använd en enda stack med villkorliga skärmar. Undvik flimring genom att hålla löftet eller staten uppdaterad.

Prestanda och bästa praxis

  • Använd infödda stack navigator ] (inte ]) för bättre prestanda och inhemska övergångar.
  • Minimera antalet skärmar monterade på en gång. React Navigation avmonterar dolda skärmar som standard för stack navigatorer, men för flik navigatorer kan du konfigurera lat laddning.
  • Passera endast primitiva data genom parametrar för att undvika serielliseringsproblem.
  • Använd ] eller ] för skärmkomponenter som återges ofta.
  • Undvik tunga beräkningar under navigationsövergångar; avlastning arbete med ].
  • Hantera alltid händelsen för osparade förändringar.

Slutsats

React Navigation ger ett intuitivt, anpassningsbart och performant sätt att hantera navigering i React Native-appar. Genom att behärska stack, flik, låda och kapslade navigatörer, tillsammans med parameter passerar, djupt länkar och autentiseringsflöden, kan du bygga robusta mobila upplevelser. För ytterligare detaljer, hänvisa till officiell react navigation dokumentation och ] React Navigation guide