JavaRush /Курсы /Модуль 3: React /Настройка Bottom Tab Navigation — создание нижнего меню д...

Настройка Bottom Tab Navigation — создание нижнего меню для удобства переходов

Модуль 3: React

22 уровень , 4 лекция

Открыта

Когда использовать Bottom Tab Navigation?

Вы наверняка замечали в мобильных приложениях нижнюю панель с кнопками, которая позволяет переключаться между основными разделами приложения. Например, в Instagram это вкладки с "Домашней страницей", "Поиском", "Добавлением контента", "Уведомлениями" и "Профилем". Это и есть Bottom Tab Navigation.

Bottom Tab Navigation используется, когда ваше приложение имеет несколько ключевых разделов, доступ к которым нужен быстро и с любого экрана. Это позволяет пользователю легко переключаться между главными частями приложения, сохраняя при этом контекст текущего раздела.

Представьте, что вы строите приложение для онлайн-магазина. Вы можете использовать нижнюю навигацию для таких разделов, как "Каталог", "Корзина", "Избранное", "Профиль" и "Настройки".

Как всё настроить: создание Bottom Tab Navigation

Установка необходимых пакетов

Перед созданием Bottom Tab Navigation необходимо убедиться, что React Navigation и его зависимости уже установлены. Однако для работы с вкладками нам понадобится ещё один пакет — @react-navigation/bottom-tabs.

Установим его:

npm install @react-navigation/bottom-tabs

Примечание:

если вы ещё не устанавливали анимации и обработку жестов, также выполните команду:

npm install react-native-screens react-native-safe-area-context react-native-gesture-handler react-native-reanimated react-native-vector-icons

После установки пакетов важно запустить проект снова:

npx react-native start

Основы использования Tab Navigator

Теперь давайте добавим нижнюю навигацию в наше приложение. Мы будем использовать createBottomTabNavigator для создания менеджера вкладок.

Пример кода:

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

// Пример простых экранов
const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Главная</Text>
        </View>
        );

const ProfileScreen = () => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Профиль</Text>
        </View>
        );

// Инициализация Tab Navigator
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Этот код создаёт простое приложение, где есть две вкладки: "Home" и "Profile". Каждая вкладка ведёт на соответствующий экран.

Что здесь происходит?

Мы создаём Tab Navigator с помощью createBottomTabNavigator.
Определяем два экрана HomeScreen и ProfileScreen и подключаем их к навигатору через Tab.Screen.
Весь Tab.Navigator оборачиваем в NavigationContainer, чтобы наше приложение понимало, что мы используем навигацию.

Настройка стилей и иконок для вкладок

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

Добавляем иконки с помощью `react-native-vector-icons`

Убедитесь, что библиотека react-native-vector-icons уже установлена. Если нет, выполните:

npm install react-native-vector-icons

И подключим иконки к нашим вкладкам:

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/MaterialIcons';

// Простые экраны
const HomeScreen = () => <View><Text>Главная</Text></View>;
const ProfileScreen = () => <View><Text>Профиль</Text></View>;

// Инициализация Tab Navigator
const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
              screenOptions={({ route }) => ({
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = 'home';
            } else if (route.name === 'Profile') {
              iconName = 'person';
            }

            // Возвращаем компонент иконки
            return <Icon name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Разбор примера:

Мы используем screenOptions, чтобы задать общие настройки для всех вкладок.
Для каждой вкладки определяем иконку через проп tabBarIcon. В зависимости от имени маршрута route.name, мы отображаем разные иконки (например, "home" или "person").
Добавляем цвета для активной и неактивной вкладок через tabBarActiveTintColor и tabBarInactiveTintColor.

Теперь приложение выглядит более профессионально!

Типизация Tab Navigation и экранов

Как же мы можем типизировать наши вкладки? Для этого создадим специальный интерфейс, описывающий параметры каждого маршрута.

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

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

const Tab = createBottomTabNavigator<RootTabParamList>();

const HomeScreen = () => <Text>Главная</Text>;
const ProfileScreen = () => <Text>Профиль</Text>;

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Почему это важно?

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

Типичные ошибки при работе с Bottom Tab Navigation

При настройке Bottom Tab Navigation можно столкнуться с рядом проблем:

Ошибка: сервер не запускается после добавления библиотек навигации. Обязательно перезапустите Metro Bundler npx react-native start, чтобы изменения вступили в силу.
Ошибки с установкой зависимостей. Убедитесь, что вы установили все требуемые пакеты, включая библиотеки жестов и анимации.
Проблемы с типизацией. Если вы используете TypeScript, всегда уточняйте типы параметров для своих экранов.