0Pricing
React Native Academy · Урок

Установка и настройка React Navigation

Установите React Navigation и его зависимости, оберните приложение в NavigationContainer и настройте первый стековый навигатор с двумя экранами.

«Установка и настройка React Navigation» — бесплатный урок React Native Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Native Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Native Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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-context

Installing 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-stack

Wrapping 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.

Часто задаваемые вопросы

Урок «Установка и настройка React Navigation» бесплатный?

Да — полный текст урока «Установка и настройка React Navigation» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Native Academy, подпишись на CoddyKit PRO. Курс React Native Academy содержит 4 уроков всего.

Чему я научусь в уроке «Установка и настройка React Navigation»?

Установите React Navigation и его зависимости, оберните приложение в NavigationContainer и настройте первый стековый навигатор с двумя экранами. Ты практикуешь React Native Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Native Academy?

Предыдущий опыт не требуется. React Native Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Установка и настройка React Navigation»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Native Academy?

Да. Каждый урок React Native Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Установка и настройка React Navigation
  2. Переходы между экранами и передача параметров
  3. Навигатор нижних вкладок
  4. Навигатор боковой панели и вложенные навигаторы
← Назад к React Native Academy