React Navigation installieren und konfigurieren
Installieren Sie React Navigation und seine Abhängigkeiten, umschließen Sie die App mit einem NavigationContainer und richten Sie Ihren ersten Stack-Navigator mit zwei Screens ein.
React Navigation installieren und konfigurieren ist eine kostenlose React Native Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Native Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
What is React Navigation?
React Navigation is the most popular library for handling navigation in React Native apps. It provides a set of navigators — Stack, Tab, Drawer — that let you move between screens, pass data, and manage navigation history. React Navigation is JavaScript-based and works seamlessly with Expo and bare React Native projects.
Installing Core Dependencies
React Navigation requires its core package plus a set of native dependencies. Run the install command and then install the native stack and required gesture/animation libraries.
npm install @react-navigation/native
npx expo install react-native-screens react-native-safe-area-contextInstalling the Native Stack Navigator
The native stack navigator from @react-navigation/native-stack uses native platform navigation components for iOS and Android, giving you better performance and a more native feel than the JS-only stack. Install it alongside the core package.
npm install @react-navigation/native-stackWrapping App in NavigationContainer
Every React Navigation setup requires NavigationContainer to be the root wrapper of your app. It manages the navigation tree, handles the back button on Android, and provides navigation context to all child components. Wrap your entire app in it inside App.js.
import { NavigationContainer } from '@react-navigation/native';
export default function App() {
return (
<NavigationContainer>
{/* navigator goes here */}
</NavigationContainer>
);
}Creating a Stack Navigator
Use createNativeStackNavigator() to create a stack navigator. The function returns a Navigator and a Screen component. Nest Stack.Screen components inside Stack.Navigator to register your screens.
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>
);
}The initialRouteName Prop
By default the first screen listed in Stack.Navigator is the initial screen. You can explicitly set which screen appears first using the initialRouteName prop on Stack.Navigator. The value must match the name of one of the Stack.Screen children.
<Stack.Navigator initialRouteName='Details'>
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Details' component={DetailsScreen} />
</Stack.Navigator>Creating Simple Screen Components
Each screen registered in the navigator is a normal React component. React Navigation automatically injects navigation and route props into every registered screen component. You can use these props to navigate or read route parameters.
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>
);
}Putting It All Together
Combining NavigationContainer, the stack navigator, and your screen components gives you a working two-screen app. The first screen registered becomes the visible screen on startup. React Navigation handles the back button and navigation header automatically.
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>
);
}Customizing the Header Title
Each Stack.Screen accepts an options prop where you can customize the header. Set title to override the default screen name displayed in the navigation bar. You can also set headerShown: false to hide the header entirely.
<Stack.Screen
name='Home'
component={HomeScreen}
options={{ title: 'My Home Page' }}
/>Screen Options on the Navigator
Set screenOptions on the Stack.Navigator to apply default options to all screens. Individual screen options override the navigator defaults. This avoids repeating common settings like headerStyle or headerTintColor on every screen.
<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>Verifying Your Setup
Run npx expo start and open the app. You should see the Home screen with a navigation header. On iOS, the back button appears automatically when you navigate to Details. On Android, the hardware back button is handled by React Navigation. If the app crashes, double-check that react-native-screens and react-native-safe-area-context are installed.
Quick Check
Test your understanding of React Navigation setup concepts from this lesson.
Lesson Recap
In this lesson you learned: install the React Navigation core and native-stack packages, wrap your app in NavigationContainer, and define screens inside Stack.Navigator with Stack.Screen. Next up we explore navigating between screens and passing parameters.
Lerne JavaScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 30
- Lektionen
- 120
Häufig gestellte Fragen
Ist die Lektion „React Navigation installieren und konfigurieren“ kostenlos?
Ja — der vollständige Text von „React Navigation installieren und konfigurieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Native Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Native Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „React Navigation installieren und konfigurieren“?
Installieren Sie React Navigation und seine Abhängigkeiten, umschließen Sie die App mit einem NavigationContainer und richten Sie Ihren ersten Stack-Navigator mit zwei Screens ein. Du übst React Native Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Native Academy zu starten?
Keine Vorkenntnisse erforderlich. React Native Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „React Navigation installieren und konfigurieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Native Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Native Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- React Navigation installieren und konfigurieren
- Zwischen Screens navigieren und Parameter übergeben
- Bottom-Tab-Navigator
- Drawer-Navigator und verschachtelte Navigatoren