12. Tab Navigator

Tab навигация — нижняя панель вкладок. Самый распространённый паттерн мобильных приложений (Instagram, Twitter, Telegram).

Установка

npx expo install @react-navigation/bottom-tabs
npx expo install @expo/vector-icons

Базовая настройка

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          const icons = {
            Home: focused ? 'home' : 'home-outline',
            Search: focused ? 'search' : 'search-outline',
            Profile: focused ? 'person' : 'person-outline',
          };
          return <Ionicons name={icons[route.name]} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#cba6f7',
        tabBarInactiveTintColor: '#6c7086',
        tabBarStyle: {
          backgroundColor: '#181825',
          borderTopColor: '#313244',
          height: 60,
          paddingBottom: 8,
        },
        headerShown: false,
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Badge (счётчик уведомлений)

<Tab.Screen
  name="Messages"
  component={MessagesScreen}
  options={{
    tabBarBadge: unreadCount,
    tabBarBadgeStyle: { backgroundColor: '#f38ba8' },
  }}
/>

Вложенные навигаторы

// Tab содержит Stack навигатор
function HomeTab() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Feed" component={FeedScreen} />
      <Stack.Screen name="Post" component={PostScreen} />
    </Stack.Navigator>
  );
}

<Tab.Navigator>
  <Tab.Screen name="HomeTab" component={HomeTab} options={{ headerShown: false }} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>