Вкладки: Bottom Tabs

Добавляем нижние вкладки — привычный способ переключаться между главными разделами приложения.

Bottom Tabs — панель вкладок снизу экрана для переключения между основными разделами (Главная, Поиск, Профиль).

Когда нужны вкладки

Стек хорош для перехода «вглубь» (список → детали). А вкладки — для переключения между равноправными разделами верхнего уровня. Почти в каждом приложении (соцсети, маркетплейсы) внизу есть 3–5 вкладок — это знакомый пользователю паттерн.

Установка

npm install @react-navigation/bottom-tabs

Создаём вкладки

Принцип тот же, что у стека: функция даёт Navigator и Screen, только это вкладки.

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

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Главная" component={HomeScreen} />
        <Tab.Screen name="Поиск" component={SearchScreen} />
        <Tab.Screen name="Профиль" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Внизу появятся три вкладки. Нажатие переключает экран — без анимации «вглубь», как в стеке.

Настройка иконок и заголовка

Внешний вид вкладки настраивают через options. Можно задать иконку, подпись, цвет.

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";

const Tab = createBottomTabNavigator();

function Tabs() {
  return (
    <Tab.Navigator screenOptions={{ tabBarActiveTintColor: "tomato" }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: "Главная" }}
      />
    </Tab.Navigator>
  );
}

screenOptions применяет настройки ко всем вкладкам сразу, а options у конкретного Screen — только к нему.

Стек внутри вкладки

Частая реальная схема: каждая вкладка содержит свой стек. Например, вкладка «Профиль» — это стек из экрана профиля и экрана настроек. Так вкладки и стек комбинируются: вкладки переключают разделы, а стек внутри ведёт «вглубь».

Вкладки и стек — сравнение

Какую вкладку считать активной — обычный JS

Логика выбора активной вкладки — обычный JavaScript. Запускаемый пример:

const tabs = ["Главная", "Поиск", "Профиль"];
const currentIndex = 2;

tabs.forEach((tab, index) => {
  const mark = index === currentIndex ? " [активна]" : "";
  console.log(tab + mark);
});

Вывод:

Главная
Поиск
Профиль [активна]

Итог

• Вкладки (createBottomTabNavigator) переключают равноправные разделы; кнопки «назад» у них нет.
• Внешний вид настраивают через options и screenOptions.
• Стек и вкладки часто комбинируют: вкладки сверху, стек внутри каждой.