Khóa học react-native

DrawerLayoutAndroid trong React Native

0 phút đọc

DrawerLayoutAndroid là một component trong React Native được thiết kế đặc biệt cho các thiết bị Android, cho phép bạn tạo ra một ngăn kéo (drawer) trượt từ cạnh màn hình. Ngăn kéo này thường được sử dụng để chứa các mục điều hướng hoặc các tùy chọn cài đặt. DrawerLayoutAndroid cung cấp một cách dễ dàng và hiệu quả để tạo ra các giao diện người dùng có ngăn kéo trượt, giúp cải thiện trải nghiệm người dùng.

Cú Pháp Cơ Bản

Để sử dụng DrawerLayoutAndroid trong React Native, bạn cần import nó từ thư viện react-native và sử dụng nó như một thành phần trong ứng dụng của bạn.

import React from "react";
import { View, Text, DrawerLayoutAndroid, StyleSheet } from "react-native";

const App = () => {
  const navigationView = (
    <View style={styles.drawerContainer}>
      <Text style={styles.drawerText}>I'm in the Drawer!</Text>
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition="left"
      renderNavigationView={() => navigationView}
    >
      <View style={styles.container}>
        <Text style={styles.mainText}>Hello, World!</Text>
      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  mainText: {
    fontSize: 20,
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
  drawerText: {
    fontSize: 18,
  },
});

export default App;

Các Thuộc Tính Quan Trọng của DrawerLayoutAndroid

drawerWidth

Thuộc tính drawerWidth xác định chiều rộng của ngăn kéo. Giá trị này được tính bằng đơn vị pixel.

Ví dụ:

<DrawerLayoutAndroid drawerWidth={300} />

drawerPosition

Thuộc tính drawerPosition xác định vị trí của ngăn kéo. Các giá trị có thể bao gồm leftright.

Ví dụ:

<DrawerLayoutAndroid drawerPosition="left" />

renderNavigationView

Thuộc tính renderNavigationView là một hàm trả về một thành phần React để hiển thị trong ngăn kéo.

Ví dụ:

const navigationView = (
  <View style={styles.drawerContainer}>
    <Text style={styles.drawerText}>I'm in the Drawer!</Text>
  </View>
);

<DrawerLayoutAndroid renderNavigationView={() => navigationView} />;

onDrawerOpen và onDrawerClose

  • onDrawerOpen: Hàm callback được gọi khi ngăn kéo được mở.
  • onDrawerClose: Hàm callback được gọi khi ngăn kéo được đóng.

Ví dụ:

<DrawerLayoutAndroid
  onDrawerOpen={() => console.log("Drawer opened")}
  onDrawerClose={() => console.log("Drawer closed")}
/>

drawerLockMode

Thuộc tính drawerLockMode xác định cách ngăn kéo có thể được mở hoặc đóng. Các giá trị có thể bao gồm unlocked, locked-closed, và locked-open.

Ví dụ:

<DrawerLayoutAndroid drawerLockMode="locked-closed" />

Ví Dụ Chi Tiết về DrawerLayoutAndroid

Ví Dụ 1: Tạo DrawerLayoutAndroid Cơ Bản

import React from "react";
import { View, Text, DrawerLayoutAndroid, StyleSheet } from "react-native";

const BasicDrawer = () => {
  const navigationView = (
    <View style={styles.drawerContainer}>
      <Text style={styles.drawerText}>I'm in the Drawer!</Text>
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition="left"
      renderNavigationView={() => navigationView}
    >
      <View style={styles.container}>
        <Text style={styles.mainText}>Hello, World!</Text>
      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  mainText: {
    fontSize: 20,
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
  drawerText: {
    fontSize: 18,
  },
});

export default BasicDrawer;

Ví Dụ 2: Tạo DrawerLayoutAndroid với Điều Hướng

import React from "react";
import {
  View,
  Text,
  DrawerLayoutAndroid,
  StyleSheet,
  Button,
} from "react-native";

const App = () => {
  const navigationView = (
    <View style={styles.drawerContainer}>
      <Button title="Go to Home" onPress={() => console.log("Home")} />
      <Button title="Go to Settings" onPress={() => console.log("Settings")} />
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition="left"
      renderNavigationView={() => navigationView}
    >
      <View style={styles.container}>
        <Text style={styles.mainText}>Main Content</Text>
      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  mainText: {
    fontSize: 20,
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
});

export default App;

Ví Dụ 3: Tạo DrawerLayoutAndroid với Sự Kiện Mở và Đóng

import React from "react";
import {
  View,
  Text,
  DrawerLayoutAndroid,
  StyleSheet,
  Alert,
} from "react-native";

const App = () => {
  const navigationView = (
    <View style={styles.drawerContainer}>
      <Text style={styles.drawerText}>I'm in the Drawer!</Text>
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition="left"
      renderNavigationView={() => navigationView}
      onDrawerOpen={() => Alert.alert("Drawer opened")}
      onDrawerClose={() => Alert.alert("Drawer closed")}
    >
      <View style={styles.container}>
        <Text style={styles.mainText}>Hello, World!</Text>
      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  mainText: {
    fontSize: 20,
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
  drawerText: {
    fontSize: 18,
  },
});

export default App;

Tùy Chỉnh DrawerLayoutAndroid

Sử Dụng drawerLockMode

Bạn có thể sử dụng thuộc tính drawerLockMode để kiểm soát cách ngăn kéo có thể được mở hoặc đóng.

Ví dụ:

import React, { useState } from "react";
import {
  View,
  Text,
  DrawerLayoutAndroid,
  StyleSheet,
  Button,
} from "react-native";

const App = () => {
  const [drawerLockMode, setDrawerLockMode] = useState("unlocked");

  const navigationView = (
    <View style={styles.drawerContainer}>
      <Button
        title="Lock Drawer"
        onPress={() => setDrawerLockMode("locked-closed")}
      />
      <Button
        title="Unlock Drawer"
        onPress={() => setDrawerLockMode("unlocked")}
      />
    </View>
  );

  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition="left"
      renderNavigationView={() => navigationView}
      drawerLockMode={drawerLockMode}
    >
      <View style={styles.container}>
        <Text style={styles.mainText}>Main Content</Text>
      </View>
    </DrawerLayoutAndroid>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  mainText: {
    fontSize: 20,
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
});

export default App;

Các Kỹ Thuật Tối Ưu Hóa Sử Dụng DrawerLayoutAndroid

Sử Dụng StyleSheet để Tối Ưu Hóa Hiệu Suất

Sử dụng StyleSheet.create để định nghĩa các style giúp tối ưu hóa hiệu suất vì các style được tạo ra chỉ một lần và được tham chiếu lại nhiều lần.

Ví dụ:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  mainText: {
    fontSize: 20,
  },
  drawerContainer: {
    flex: 1,
    backgroundColor: "#fff",
    padding: 20,
  },
  drawerText: {
    fontSize: 18,
  },
});

Tránh Sử Dụng Hàm Inline

Tránh sử dụng các hàm inline cho thuộc tính renderNavigationView để tránh việc tạo lại hàm mỗi khi component được render.

Ví dụ:

const navigationView = (
  <View style={styles.drawerContainer}>
    <Text style={styles.drawerText}>I'm in the Drawer!</Text>
  </View>
);

<DrawerLayoutAndroid renderNavigationView={() => navigationView} />;

Các Hạn Chế của DrawerLayoutAndroid Component

Mặc dù DrawerLayoutAndroid component trong React Native rất mạnh mẽ, nhưng nó cũng có một số hạn chế:

  1. Chỉ Hỗ Trợ Android: DrawerLayoutAndroid chỉ hoạt động trên các thiết bị Android và không có tác dụng trên iOS.
  2. Tùy Chỉnh Giao Diện: DrawerLayoutAndroid không hỗ trợ nhiều tùy chỉnh giao diện như thay đổi font chữ, thêm biểu tượng, hoặc tạo nền gradient.
  3. Quản Lý Sự Kiện: Khi có nhiều sự kiện lắng nghe được đăng ký, việc quản lý và loại bỏ chúng có thể trở nên phức tạp.

Kết Luận

DrawerLayoutAndroid là một thành phần cơ bản và quan trọng trong React Native, giúp bạn tạo ra các giao diện người dùng mượt mà và hiệu quả. Bằng cách hiểu rõ các thuộc tính và cách sử dụng DrawerLayoutAndroid, bạn có thể tạo ra các giao diện người dùng mượt mà và hiệu quả. Hy vọng qua bài viết này, bạn đã có thể nắm bắt được cách sử dụng DrawerLayoutAndroid trong React Native và áp dụng vào các dự án của mình.

Avatar
Được viết bởi

TechMely Team

Gợi ý câu hỏi phỏng vấn

entry

React Native là gì?

entry

What is React Native?

entry

List some benefits of using React Native for building mobile apps?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào

Khoá học javascript từ cơ bản đến chuyên sâuYoutube Techmely