Установка и настройка React Navigation — установка пакетов и зависимостей

React Navigation: основа навигации для мобильных приложений

Навигация — один из важнейших аспектов в разработке мобильных приложений. В React Native для этого существует популярная библиотека — React Navigation. Она предоставляет мощный и гибкий API для создания разных типов навигации: стэк, табы, боковая панель и многое другое.

Почему именно React Navigation?

• Гибкость: поддержка множества видов навигации.
• Простота: интуитивно понятный API.
• Кроссплатформенность: одинаково работает на iOS и Android.
• Расширяемость: возможность настройки под любые сценарии.
• Активное сообщество: регулярные обновления и большое количество ресурсов.

Установка React Navigation

Первый шаг к использованию React Navigation — правильная установка. Она включает несколько этапов, так как React Navigation зависит от модулей для жестов и анимаций.

Шаг 1: установка основных пакетов

Для начала установим базовые пакеты React Navigation. Убедитесь, что вы находитесь в корневой директории вашего проекта и выполните команду:

npm install @react-navigation/native

Этот пакет предоставляет ядро React Navigation.

Шаг 2: установка зависимостей для работы с жестами и анимациями

React Navigation использует следующие библиотеки для работы с жестами и анимациями:

• react-native-gesture-handler
• react-native-reanimated
• react-native-screens
• react-native-safe-area-context
• @react-native-community/masked-view

Установим их одной командой:

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

Шаг 3: установка навигационного контейнера

React Navigation использует специальный контейнер для управления состоянием навигации. Чтобы его настроить, нужно установить дополнительные пакеты:

npm install @react-navigation/stack

Пакет @react-navigation/stack является дополнением для создания стэк-навигации, о которой пойдёт речь в следующей лекции.

Настройка проекта для работы с React Navigation

Теперь, когда все зависимости установлены, мы перейдём к технике "заставить всё это работать". Давайте убедимся, что наш проект готов к запуску.

Шаг 1: подключение жестов в Android (важно!)

Для Android требуется дополнительная настройка. Откройте файл MainActivity.java в папке вашего проекта android/app/src/main/java/com/yourproject/.

Измените его следующим образом:

import android.os.Bundle; // добавьте этот импорт
import com.facebook.react.ReactActivity;
import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView; // добавьте этот импорт

public class MainActivity extends ReactActivity {

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

  @Override
  protected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
      @Override
      protected ReactRootView createRootView() {
        return new RNGestureHandlerEnabledRootView(MainActivity.this);
      }
    };
  }
}

Здесь мы добавляем поддержку управления жестами.

Шаг 2: перезапуск Metro bundler

После изменений в Android-файлах рекомендуется полностью перезапустить Metro bundler. Закройте терминал и выполните команду:

npm start --reset-cache

Инициализация навигационного контейнера

Настало время написать немного кода и увидеть React Navigation в действии. Начнём с создания базового навигационного контейнера.

Шаг 1: создание компонента App.tsx

Откройте или создайте файл App.tsx и добавьте следующий код:

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

const App: React.FC = () => {
  return (
    <NavigationContainer>
      {/* Здесь будет располагаться навигация */}
    </NavigationContainer>
  );
};

export default App;

NavigationContainer — это корневой компонент, который оборачивает всё приложение и позволяет работать с навигацией. Без него ничего не заработает!

Шаг 2: подключение стэк-навигации (для примера)

Добавим простой пример стэк-навигации. Для этого подключим createStackNavigator:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, View } from 'react-native';

// Определяем типы экранов
type RootStackParamList = {
  Home: undefined;
  Details: undefined;
};

// Создаём навигационный стэк
const Stack = createStackNavigator<RootStackParamList>();

const HomeScreen: React.FC = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Главный экран</Text>
      </View>
      );

const DetailsScreen: React.FC = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Экран деталей</Text>
      </View>
      );

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

export default App;

Проверка работы навигации

Запустите приложение снова, используя команду:

npm run android

или:

npm run ios

Вы должны увидеть главный экран. Попробуйте добавить кнопку на один из экранов, чтобы протестировать переходы между экранами:

import { Button } from 'react-native';

// На HomeScreen добавьте:
<Button
  title="Перейти к деталям"
  onPress={() => navigation.navigate('Details')}
/>

Типичные ошибки и способы их решения

1. Если приложение падает сразу после запуска, проверьте настройки в MainActivity.java. Возможно, вы забыли добавить поддержку RNGestureHandlerEnabledRootView.
2. Ошибка Cannot find module react-native-reanimated? Убедитесь, что вы установили все зависимости, и перезапустите Metro bundler.
3. "Белый экран" при переходах? Убедитесь, что вы обернули приложение в NavigationContainer и правильно подключили компоненты экранов.

Мы сделали первый шаг к созданию сложных интерфейсов с навигацией. В следующей лекции подробно поговорим о Stack Navigation и её настройке.