KUNGFU TECH vietnam

Khóa học react-native

StatusBar trong React Native

0 phút đọc

StatusBar là một component trong React Native cho phép bạn kiểm soát giao diện và hành vi của thanh trạng thái (status bar) trên thiết bị di động. Thanh trạng thái là khu vực nằm ở phía trên cùng của màn hình, hiển thị các thông tin như thời gian, trạng thái pin, tín hiệu mạng, và các biểu tượng thông báo. StatusBar cung cấp các phương thức và thuộc tính để bạn có thể tùy chỉnh màu sắc, kiểu chữ, và trạng thái hiển thị của thanh trạng thái, giúp tạo ra các trải nghiệm người dùng mượt mà và nhất quán.

Cú Pháp Cơ Bản

Để sử dụng StatusBar trong React Native, bạn cần import nó từ thư viện react-native và sử dụng các thuộc tính của nó để điều chỉnh giao diện và hành vi của thanh trạng thái.

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

const App = () => {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#00BCD4" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#00BCD4",
  },
});

export default App;

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

animated

Thuộc tính animated xác định liệu các thay đổi về thuộc tính của thanh trạng thái có được thực hiện với hiệu ứng chuyển tiếp hay không. Giá trị mặc định là false.

Ví dụ:

<StatusBar animated={true} />

backgroundColor

Thuộc tính backgroundColor xác định màu nền của thanh trạng thái. Thuộc tính này chỉ áp dụng cho các thiết bị Android.

Ví dụ:

<StatusBar backgroundColor="#00BCD4" />

barStyle

Thuộc tính barStyle xác định màu sắc của văn bản và biểu tượng trên thanh trạng thái. Các giá trị có thể bao gồm default, dark-content, và light-content.

Ví dụ:

<StatusBar barStyle="dark-content" />

hidden

Thuộc tính hidden xác định liệu thanh trạng thái có được ẩn hay không.

Ví dụ:

<StatusBar hidden={true} />

networkActivityIndicatorVisible (iOS Only)

Thuộc tính networkActivityIndicatorVisible xác định liệu biểu tượng hoạt động mạng có được hiển thị hay không. Thuộc tính này chỉ áp dụng cho các thiết bị iOS.

Ví dụ:

<StatusBar networkActivityIndicatorVisible={true} />

showHideTransition (iOS Only)

Thuộc tính showHideTransition xác định hiệu ứng chuyển tiếp khi hiển thị hoặc ẩn thanh trạng thái. Các giá trị có thể bao gồm fade và slide.

Ví dụ:

<StatusBar showHideTransition="fade" />

translucent

Thuộc tính translucent xác định liệu ứng dụng có vẽ dưới thanh trạng thái hay không. Thuộc tính này chỉ áp dụng cho các thiết bị Android.

Ví dụ:

<StatusBar translucent={true} />

Ví Dụ Chi Tiết về StatusBar

Ví Dụ 1: Hiển Thị StatusBar Cơ Bản

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

const BasicStatusBar = () => {
  return (
    <View style={styles.container}>
      <StatusBar barStyle="dark-content" backgroundColor="#00BCD4" />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#00BCD4",
  },
});

export default BasicStatusBar;

Ví Dụ 2: Thay Đổi Kiểu Thanh Trạng Thái

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

const ChangeStatusBarStyle = () => {
  const [barStyle, setBarStyle] = useState("default");

  const changeStyle = () => {
    setBarStyle(barStyle === "default" ? "light-content" : "default");
  };

  return (
    <View style={styles.container}>
      <StatusBar barStyle={barStyle} backgroundColor="#00BCD4" />
      <Button title="Change StatusBar Style" onPress={changeStyle} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#00BCD4",
  },
});

export default ChangeStatusBarStyle;

Ví Dụ 3: Ẩn và Hiển Thị StatusBar

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

const ToggleStatusBar = () => {
  const [hidden, setHidden] = useState(false);

  const toggleStatusBar = () => {
    setHidden(!hidden);
  };

  return (
    <View style={styles.container}>
      <StatusBar hidden={hidden} animated={true} />
      <Button title="Toggle StatusBar" onPress={toggleStatusBar} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#00BCD4",
  },
});

export default ToggleStatusBar;

Tùy Chỉnh StatusBar

Sử Dụng Các Tùy Chọn Tùy Chỉnh

Bạn có thể sử dụng các tùy chọn tùy chỉnh để thay đổi giao diện và hành vi của StatusBar.

Ví dụ:

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

const CustomStatusBar = () => {
  return (
    <View style={styles.container}>
      <StatusBar
        barStyle="light-content"
        backgroundColor="#6a51ae"
        translucent={true}
        hidden={false}
        animated={true}
        showHideTransition="fade"
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#6a51ae",
  },
});

export default CustomStatusBar;

Sử Dụng Thư Viện Bên Ngoài

Nếu bạn cần các tính năng phức tạp hơn, bạn có thể sử dụng các thư viện bên ngoài như expo-status-bar hoặc react-native-navigation.

Sử Dụng expo-status-bar

Cài Đặt Thư Viện

npx expo install expo-status-bar

Sử Dụng Thư Viện

import React from "react";
import { View, StyleSheet } from "react-native";
import { StatusBar } from "expo-status-bar";

const ExpoStatusBarExample = () => {
  return (
    <View style={styles.container}>
      <StatusBar style="light" />
      <Text style={styles.text}>
        Notice that the status bar has light text!
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    color: "#fff",
  },
});

export default ExpoStatusBarExample;

Sử Dụng react-native-navigation

Cài Đặt Thư Viện

npm install react-native-navigation

Sử Dụng Thư Viện

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

const NavigationStatusBarExample = () => {
  Navigation.mergeOptions("componentId", {
    statusBar: {
      backgroundColor: "white",
      style: "dark",
    },
  });

  return (
    <View style={styles.container}>
      <Text>React Native Navigation StatusBar Example</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default NavigationStatusBarExample;

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

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",
    backgroundColor: "#00BCD4",
  },
});

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

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

Ví dụ:

const toggleStatusBar = () => {
  setHidden(!hidden);
};

<Button title="Toggle StatusBar" onPress={toggleStatusBar} />;

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

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

  1. Tùy Chỉnh Giao Diện: StatusBar 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.
  2. Hiệu Suất: Khi sử dụng quá nhiều sự kiện lắng nghe thay đổi trạng thái, hiệu suất của ứng dụng có thể bị ảnh hưởng.
  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

StatusBar 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 StatusBar, 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 StatusBar 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

Gợi ý bài viết

Bình luận

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

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