Installera och konfigurera React Navigation
Installera React Navigation och dess beroenden, omslut appen med en NavigationContainer och konfigurera er första stacknavigator med två skärmar.
Installera och konfigurera React Navigation är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad är React Navigation?
React Navigation är det mest populära biblioteket för att hantera navigering i React Native-appar. Det tillhandahåller en uppsättning navigatörer — Stack, Tab och Drawer — som låter Er växla mellan skärmar, skicka data och hantera navigeringshistorik. React Navigation är JavaScript-baserat och fungerar smidigt med Expo och fristående React Native-projekt.
Installera centrala beroenden
React Navigation kräver sitt kärnpaket samt en uppsättning inbyggda beroenden. Kör installationskommandot och installera sedan den inbyggda stack-navigatören samt de nödvändiga biblioteken för gester och animeringar.
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-contextInstallera den inbyggda stack-navigatören
Den inbyggda stack-navigatören från @react-navigation/native-stack använder plattformens inbyggda navigeringskomponenter för iOS och Android. Det ger bättre prestanda och en mer plattformstrogen känsla än en stack som enbart använder JavaScript. Installera den tillsammans med kärnpaketet.
npm install @react-navigation/native-stackOmsluta appen med NavigationContainer
Alla React Navigation-konfigurationer kräver att NavigationContainer är appens rotomslutande komponent. Den hanterar navigeringsträdet, Androids bakåtknapp och tillhandahåller navigeringskontext till alla underordnade komponenter. Omslut hela appen med den i App.js.
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
{/* navigator goes here */}
</NavigationContainer>
);
}Skapa en stack-navigatör
Använd createNativeStackNavigator() för att skapa en stack-navigatör. Funktionen returnerar komponenterna Navigator och Screen. Placera Stack.Screen-komponenter inuti Stack.Navigator för att registrera Era skärmar.
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
);
}Egenskapen initialRouteName
Som standard blir den första skärmen i Stack.Navigator startskärmen. Ni kan uttryckligen ange vilken skärm som ska visas först genom egenskapen initialRouteName på Stack.Navigator. Värdet måste motsvara name för ett av de underordnade Stack.Screen-elementen.
<Stack.Navigator initialRouteName='Details'>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Skapa enkla skärmkomponenter
Varje skärm som registreras i navigatören är en vanlig React-komponent. React Navigation injicerar automatiskt egenskaperna navigation och route i varje registrerad skärmkomponent. Ni kan använda dessa egenskaper för att navigera eller läsa ruttparametrar.
function HomeScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}Sätta ihop allt
Genom att kombinera NavigationContainer, stack-navigatören och Era skärmkomponenter får Ni en fungerande app med två skärmar. Den första registrerade skärmen blir den synliga skärmen vid start. React Navigation hanterar automatiskt bakåtknappen och navigeringshuvudet.
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}Anpassa rubriken i navigeringshuvudet
Varje Stack.Screen accepterar en options-egenskap där Ni kan anpassa huvudet. Ange title för att ersätta det standardskärmnnamn som visas i navigeringsfältet. Ni kan också ange headerShown: false för att dölja huvudet helt.
<Stack.Screen
name='Home'
component={HomeScreen}
options={{ title: 'My Home Page' }}
/>Skärmalternativ på navigatören
Ange screenOptions på Stack.Navigator för att tillämpa standardalternativ på alla skärmar. Enskilda skärmars options åsidosätter navigatörens standardvärden. På så sätt slipper Ni upprepa vanliga inställningar som headerStyle eller headerTintColor på varje skärm.
<Stack.Navigator
screenOptions={{
headerStyle: { backgroundColor: '#6200ee' },
headerTintColor: '#fff',
headerTitleStyle: { fontWeight: 'bold' },
}}
>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Verifiera Er konfiguration
Kör npx expo start och öppna appen. Ni bör se startskärmen Home med ett navigeringshuvud. På iOS visas bakåtknappen automatiskt när Ni navigerar till Details. På Android hanteras den fysiska bakåtknappen av React Navigation. Om appen kraschar bör Ni kontrollera att react-native-screens och react-native-safe-area-context är installerade.
Snabbkontroll
Testa Er förståelse av begreppen för konfiguration av React Navigation från den här lektionen.
Sammanfattning av lektionen
I den här lektionen lärde Ni Er att installera React Navigations core- och native-stack-paket, omsluta appen med NavigationContainer och definiera skärmar i Stack.Navigator med Stack.Screen. Härnäst utforskar vi hur man navigerar mellan skärmar och skickar parametrar.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Installera och konfigurera React Navigation” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Installera och konfigurera React Navigation”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Installera och konfigurera React Navigation”?
Installera React Navigation och dess beroenden, omslut appen med en NavigationContainer och konfigurera er första stacknavigator med två skärmar. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Installera och konfigurera React Navigation”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Installera och konfigurera React Navigation
- Navigera mellan skärmar och skicka parametrar
- Navigator med flikar längst ned
- Drawer-navigatorer och nästlade navigatorer