React Native / Tab Navigation

Tab Navigation

Instagram, YouTube, Twitter — эдгээр аппын доод хэсэгт байдаг иконтой цэсийг Tab Navigation гэдэг. Хэрэглэгч дэлгэцийн доод хэсгийн табыг дарж хооронд шилжинэ. Энэ хичээлд @react-navigation/bottom-tabs ашиглан tab bar бүтээнэ.

Суулгалт

bash
npx expo install @react-navigation/bottom-tabs

Stack Navigation-г өмнөх хичээлд суулгасан тул @react-navigation/native болон react-native-screens дахин суулгах шаардлагагүй.

Үндсэн Tab Navigator тохируулга

jsx
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import HomeScreen from "./screens/HomeScreen";
import CoursesScreen from "./screens/CoursesScreen";
import ProfileScreen from "./screens/ProfileScreen";

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          headerStyle: { backgroundColor: "#0f172a" },
          headerTintColor: "#f1f5f9",
          tabBarStyle: {
            backgroundColor: "#0f172a",
            borderTopColor: "#1e293b",
            borderTopWidth: 1,
          },
          tabBarActiveTintColor: "#22d3ee",
          tabBarInactiveTintColor: "#475569",
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;
            if (route.name === "Home") {
              iconName = focused ? "home" : "home-outline";
            } else if (route.name === "Courses") {
              iconName = focused ? "book" : "book-outline";
            } else if (route.name === "Profile") {
              iconName = focused ? "person" : "person-outline";
            }
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
      >
        <Tab.Screen
          name="Home"
          component={HomeScreen}
          options={{ title: "Нүүр" }}
        />
        <Tab.Screen
          name="Courses"
          component={CoursesScreen}
          options={{ title: "Сургалтууд" }}
        />
        <Tab.Screen
          name="Profile"
          component={ProfileScreen}
          options={{ title: "Профайл" }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

tabBarIcon нь focused, color, size гурван утга хүлээн авна. focused нь тухайн tab сонгогдсон эсэхийг заадаг тул home эсвэл home-outline гэж ялгаж харуулж болно.

tabBarBadge — мэдэгдлийн тоо харуулах

Мессеж эсвэл мэдэгдлийн тоо харуулах хэрэгтэй үед tabBarBadge prop ашиглана:

jsx
<Tab.Screen
  name="Messages"
  component={MessagesScreen}
  options={{
    title: "Мессеж",
    tabBarBadge: 3,
    tabBarIcon: ({ focused, color, size }) => (
      <Ionicons
        name={focused ? "chatbubble" : "chatbubble-outline"}
        size={size}
        color={color}
      />
    ),
  }}
/>

tabBarBadge нь тоо эсвэл мөр байж болно. tabBarBadge={0} тохиолдолд badge харагдахгүй тул undefined ашиглах нь зөв:

jsx
tabBarBadge: unreadCount > 0 ? unreadCount : undefined,

Tab дахь header нуух

Зарим дэлгэцэд tab-н дотроо Stack Navigator байдаг тул давхар header гарч ирдэг. Tab-н headerийг нуухдаа:

jsx
<Tab.Screen
  name="Home"
  component={HomeScreen}
  options={{
    headerShown: false, // Tab-н header-ийг нуунa
    title: "Нүүр",
  }}
/>

Бодит жишээ: доод цэсний бүтэн тохиргоо

jsx
import { View, Text, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";

// Жишээ дэлгэц
function PlaceholderScreen({ route }) {
  return (
    <View style={styles.center}>
      <Text style={styles.text}>{route.name} дэлгэц</Text>
    </View>
  );
}

const TAB_SCREENS = [
  { name: "Home", title: "Нүүр", icon: "home" },
  { name: "Courses", title: "Сургалтууд", icon: "book" },
  { name: "Projects", title: "Төслүүд", icon: "code-slash" },
  { name: "Profile", title: "Профайл", icon: "person" },
];

export default function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => {
        const screen = TAB_SCREENS.find((s) => s.name === route.name);
        return {
          tabBarIcon: ({ focused, color, size }) => (
            <Ionicons
              name={focused ? screen.icon : `${screen.icon}-outline`}
              size={size}
              color={color}
            />
          ),
          tabBarActiveTintColor: "#22d3ee",
          tabBarInactiveTintColor: "#475569",
          tabBarStyle: {
            backgroundColor: "#0f172a",
            borderTopColor: "#1e293b",
          },
          headerStyle: { backgroundColor: "#0f172a" },
          headerTintColor: "#f1f5f9",
        };
      }}
    >
      {TAB_SCREENS.map((screen) => (
        <Tab.Screen
          key={screen.name}
          name={screen.name}
          component={PlaceholderScreen}
          options={{ title: screen.title }}
        />
      ))}
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  center: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0b1120",
  },
  text: { fontSize: 18, color: "#94a3b8" },
});

Дараагийн хичээлд:

Tab Navigation-г тохируулж сурлаа. Дараагийн хичээлд Drawer Navigation — зүүн эсвэл баруун талаас гулсан нээгддэг цэс. Gmail, Google Maps зэрэг аппын "гамбургер" цэстэй ижил загвар.

← Өмнөх хичээлStack NavigationДараах хичээл →Drawer Navigation