React Native / Drawer Navigation

Drawer Navigation

Drawer Navigation нь дэлгэцийн зүүн (эсвэл баруун) талаас гулсан гарч ирдэг цэс. Gmail, Google Maps, BBC News зэрэг аппад байдаг "гамбургер" ☰ товч дарахад нээгддэг тэр цэс юм. Олон хэсэгтэй, том аппуудад маш тохиромжтой.

Суулгалт

bash
npx expo install @react-navigation/drawer
npx expo install react-native-gesture-handler react-native-reanimated

Суулгалтын дараа babel.config.js дотор Reanimated plugin нэмнэ:

js
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["react-native-reanimated/plugin"],
  };
};

Тохиргоо өөрчлөгдсөн тул npx expo start --clear командаар кэшийг цэвэрлэж дахин эхлүүлнэ.

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

jsx
import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import { Ionicons } from "@expo/vector-icons";
import HomeScreen from "./screens/HomeScreen";
import CoursesScreen from "./screens/CoursesScreen";
import ProfileScreen from "./screens/ProfileScreen";

const Drawer = createDrawerNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        screenOptions={{
          drawerStyle: {
            backgroundColor: "#0f172a",
            width: 280,
          },
          drawerActiveTintColor: "#22d3ee",
          drawerInactiveTintColor: "#94a3b8",
          drawerActiveBackgroundColor: "#1e293b",
          headerStyle: { backgroundColor: "#0f172a" },
          headerTintColor: "#f1f5f9",
        }}
      >
        <Drawer.Screen
          name="Home"
          component={HomeScreen}
          options={{
            title: "Нүүр хуудас",
            drawerIcon: ({ color, size }) => (
              <Ionicons name="home-outline" size={size} color={color} />
            ),
          }}
        />
        <Drawer.Screen
          name="Courses"
          component={CoursesScreen}
          options={{
            title: "Сургалтууд",
            drawerIcon: ({ color, size }) => (
              <Ionicons name="book-outline" size={size} color={color} />
            ),
          }}
        />
        <Drawer.Screen
          name="Profile"
          component={ProfileScreen}
          options={{
            title: "Профайл",
            drawerIcon: ({ color, size }) => (
              <Ionicons name="person-outline" size={size} color={color} />
            ),
          }}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

import 'react-native-gesture-handler' нь файлын хамгийн эхний мөрт байх ёстой — энэ нь gesture-г боловсруулах суурь санг идэвхжүүлдэг.

Drawer програмаар нээх ба хаах

Drawer-г кодоор нээх, хаах хэрэгтэй үед navigation object-н методуудыг ашиглана:

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

export default function HomeScreen({ navigation }) {
  return (
    <View style={styles.container}>
      {/* Drawer нээх товч */}
      <TouchableOpacity
        style={styles.menuBtn}
        onPress={() => navigation.openDrawer()}
      >
        <Ionicons name="menu" size={24} color="#f1f5f9" />
      </TouchableOpacity>

      <Text style={styles.title}>Нүүр хуудас</Text>

      {/* Тодорхой дэлгэц рүү шилжих */}
      <TouchableOpacity
        style={styles.btn}
        onPress={() => navigation.navigate("Courses")}
      >
        <Text style={styles.btnText}>Сургалтууд харах</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: "#0b1120" },
  menuBtn: { alignSelf: "flex-start", marginBottom: 24 },
  title: {
    fontSize: 26,
    fontWeight: "bold",
    color: "#f1f5f9",
    marginBottom: 16,
  },
  btn: {
    backgroundColor: "#1e293b",
    padding: 14,
    borderRadius: 10,
    alignItems: "center",
  },
  btnText: { color: "#94a3b8", fontSize: 15 },
});

navigation.openDrawer() — нээнэ, navigation.closeDrawer() — хаана, navigation.toggleDrawer() — нээлттэй бол хаана, хаалттай бол нээнэ.

Drawer-н дотор custom контент

Анхдагч drawer харагдлыг бүрэн өөрчлөхийг хүсвэл drawerContent prop ашиглана:

jsx
import {
  DrawerContentScrollView,
  DrawerItemList,
} from "@react-navigation/drawer";
import { View, Text, StyleSheet } from "react-native";

function CustomDrawer(props) {
  return (
    <DrawerContentScrollView {...props} style={styles.drawer}>
      {/* Хэрэглэгчийн мэдээлэл */}
      <View style={styles.userSection}>
        <View style={styles.avatar} />
        <Text style={styles.userName}>Болд Баатар</Text>
        <Text style={styles.userEmail}>bold@example.com</Text>
      </View>

      {/* Стандарт цэсний зүйлс */}
      <DrawerItemList {...props} />

      {/* Доод хэсэг */}
      <View style={styles.footer}>
        <Text style={styles.version}>v1.0.0</Text>
      </View>
    </DrawerContentScrollView>
  );
}

const styles = StyleSheet.create({
  drawer: { backgroundColor: "#0f172a" },
  userSection: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: "#1e293b",
    marginBottom: 8,
  },
  avatar: {
    width: 56,
    height: 56,
    borderRadius: 28,
    backgroundColor: "#22d3ee",
    marginBottom: 12,
  },
  userName: { fontSize: 16, fontWeight: "bold", color: "#f1f5f9" },
  userEmail: { fontSize: 13, color: "#475569", marginTop: 2 },
  footer: { padding: 20, marginTop: "auto" },
  version: { color: "#334155", fontSize: 13 },
});

// App.jsx дотор:
// <Drawer.Navigator drawerContent={(props) => <CustomDrawer {...props} />}>

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

Drawer Navigation-г тохируулж сурлаа. Дараагийн хичээлд Nested Navigation — Stack, Tab, Drawer-г хоорондоо хавчуулан ашиглах арга. Жинхэнэ аппуудад navigation-ууд дотор нь шигтгэгддэг.

← Өмнөх хичээлTab NavigationДараах хичээл →Nested Navigation