Tab Navigation - Les onglets du menu sous-marin

Dans le palais d'Atlantis se trouve un menu principal à onglets, qui te permet de passer rapidement d'une section principale à une autre. C'est Tab Navigation !

Installer Tab Navigator

npx expo install @react-navigation/bottom-tabs

Tab Navigator de base

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

type TabParamList = {
  Home: undefined;
  Search: undefined;
  Profile: undefined;
  Settings: undefined;
};

const Tab = createBottomTabNavigator<TabParamList>();

function MainTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: keyof typeof Ionicons.glyphMap;

          switch (route.name) {
            case 'Home':
              iconName = focused ? 'home' : 'home-outline';
              break;
            case 'Search':
              iconName = focused ? 'search' : 'search-outline';
              break;
            case 'Profile':
              iconName = focused ? 'person' : 'person-outline';
              break;
            case 'Settings':
              iconName = focused ? 'settings' : 'settings-outline';
              break;
            default:
              iconName = 'ellipse';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#1a5276',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Search" component={SearchScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Styliser la barre d'onglets

<Tab.Navigator
  screenOptions={{
    tabBarStyle: {
      backgroundColor: '#0a2e4a',
      borderTopWidth: 0,
      elevation: 10,
      height: 60,
      paddingBottom: 8,
      paddingTop: 8,
    },
    tabBarActiveTintColor: '#00d4ff',
    tabBarInactiveTintColor: '#6c7a89',
    tabBarLabelStyle: {
      fontSize: 12,
      fontWeight: '600',
    },
    headerStyle: {
      backgroundColor: '#0a2e4a',
    },
    headerTintColor: '#fff',
  }}
>
  {/* Écrans */}
</Tab.Navigator>

Badge sur un onglet

<Tab.Screen
  name="Notifications"
  component={NotificationsScreen}
  options={{
    tabBarBadge: 3, // Affiche un badge avec un nombre
    tabBarBadgeStyle: {
      backgroundColor: '#ff6b6b',
      color: '#fff',
    },
  }}
/>

Masquer la barre d'onglets sur certains écrans

// Dans le composant de l'écran
import { useLayoutEffect } from 'react';

function DetailsScreen({ navigation }) {
  useLayoutEffect(() => {
    navigation.getParent()?.setOptions({
      tabBarStyle: { display: 'none' },
    });

    return () => {
      navigation.getParent()?.setOptions({
        tabBarStyle: { display: 'flex' },
      });
    };
  }, [navigation]);

  return <View>{/* contenu */}</View>;
}

Imbriquer un Stack dans des onglets

// Chaque onglet peut avoir son propre Stack Navigator
function HomeStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="HomeMain" component={HomeScreen} />
      <Stack.Screen name="HomeDetails" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen
          name="Home"
          component={HomeStack}
          options={{ headerShown: false }} // Masque l'en-tête de l'onglet, le Stack a le sien
        />
        <Tab.Screen name="Profile" component={ProfileStack} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Onglets en haut (Material Top Tabs)

npx expo install @react-navigation/material-top-tabs react-native-pager-view

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TopTab = createMaterialTopTabNavigator();

function ProfileTabs() {
  return (
    <TopTab.Navigator
      screenOptions={{
        tabBarLabelStyle: { fontSize: 14, fontWeight: 'bold' },
        tabBarStyle: { backgroundColor: '#0a2e4a' },
        tabBarActiveTintColor: '#00d4ff',
        tabBarIndicatorStyle: { backgroundColor: '#00d4ff' },
      }}
    >
      <TopTab.Screen name="Posts" component={PostsScreen} />
      <TopTab.Screen name="Photos" component={PhotosScreen} />
      <TopTab.Screen name="Likes" component={LikesScreen} />
    </TopTab.Navigator>
  );
}

Tab Navigation est idéale pour les sections principales d'une application. Les utilisateurs s'attendent à la trouver en bas de l'écran (iOS) ou en haut (Android Material Design).

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

const Tab = createBottomTabNavigator();

function Screen({ label }) {
  return (
    <View style={styles.screen}>
      <Text style={styles.title}>{label}</Text>
    </View>
  );
}

const HomeScreen = () => <Screen label="Salle principale" />;
const MapScreen = () => <Screen label="Carte des profondeurs" />;
const ProfileScreen = () => <Screen label="Profil de Triton" />;

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        {/* TODO : ajoute un onglet "Home" avec component={HomeScreen} */}
        {/* Dans options, définis tabBarIcon: ({ color, size }) => <Ionicons name="home" size={size} color={color} /> */}

        {/* TODO : ajoute un onglet "Map" (component={MapScreen}, icône "map") */}

        {/* TODO : ajoute un onglet "Profile" (component={ProfileScreen}, icône "person") */}

      </Tab.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#1a5276',
  },
  title: {
    fontSize: 22,
    color: '#fff',
    fontWeight: '600',
  },
});