KUNGFU TECH vietnam

Khóa học react-native

ToastAndroid trong React Native

0 phút đọc

ToastAndroid là một module trong React Native cho phép bạn hiển thị các thông báo ngắn gọn (toast) trên các thiết bị Android. Toast là một cách tuyệt vời để cung cấp thông tin phản hồi ngắn gọn cho người dùng mà không làm gián đoạn trải nghiệm của họ. Thông báo toast sẽ tự động biến mất sau một khoảng thời gian ngắn. ToastAndroid cung cấp các phương thức để hiển thị các thông báo này với nhiều tùy chọn khác nhau.

Cú Pháp Cơ Bản

Để sử dụng ToastAndroid trong React Native, bạn cần import nó từ thư viện react-native và sử dụng các phương thức của nó để hiển thị thông báo toast.

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

const App = () => {
  const showToast = () => {
    ToastAndroid.show("This is a toast message", ToastAndroid.SHORT);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
};

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

export default App;

Các Phương Thức Quan Trọng của ToastAndroid

show

Phương thức show được sử dụng để hiển thị một thông báo toast ngắn gọn. Nó nhận vào hai tham số: thông điệp và thời gian hiển thị.

Cú pháp:

ToastAndroid.show(message, duration);

Ví dụ:

ToastAndroid.show("This is a toast message", ToastAndroid.SHORT);

showWithGravity

Phương thức showWithGravity được sử dụng để hiển thị một thông báo toast với vị trí tùy chỉnh. Nó nhận vào ba tham số: thông điệp, thời gian hiển thị, và vị trí.

Cú pháp:

ToastAndroid.showWithGravity(message, duration, gravity);

Ví dụ:

ToastAndroid.showWithGravity(
  "This is a toast message",
  ToastAndroid.SHORT,
  ToastAndroid.CENTER
);

showWithGravityAndOffset

Phương thức showWithGravityAndOffset được sử dụng để hiển thị một thông báo toast với vị trí và độ lệch tùy chỉnh. Nó nhận vào năm tham số: thông điệp, thời gian hiển thị, vị trí, độ lệch theo trục X, và độ lệch theo trục Y.

Cú pháp:

ToastAndroid.showWithGravityAndOffset(
  message,
  duration,
  gravity,
  xOffset,
  yOffset
);

Ví dụ:

ToastAndroid.showWithGravityAndOffset(
  "This is a toast message",
  ToastAndroid.SHORT,
  ToastAndroid.BOTTOM,
  0,
  50
);

Các Giá Trị Thời Gian Hiển Thị

  • ToastAndroid.SHORT: Hiển thị thông báo trong một khoảng thời gian ngắn.
  • ToastAndroid.LONG: Hiển thị thông báo trong một khoảng thời gian dài.

Các Giá Trị Vị Trí

  • ToastAndroid.TOP: Hiển thị thông báo ở phía trên màn hình.
  • ToastAndroid.BOTTOM: Hiển thị thông báo ở phía dưới màn hình.
  • ToastAndroid.CENTER: Hiển thị thông báo ở giữa màn hình.

Ví Dụ Chi Tiết về ToastAndroid

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

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

const BasicToast = () => {
  const showToast = () => {
    ToastAndroid.show("This is a basic toast message", ToastAndroid.SHORT);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
};

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

export default BasicToast;

Ví Dụ 2: Hiển Thị Toast với Vị Trí Tùy Chỉnh

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

const CustomPositionToast = () => {
  const showToast = () => {
    ToastAndroid.showWithGravity(
      "This is a toast message",
      ToastAndroid.SHORT,
      ToastAndroid.CENTER
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
};

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

export default CustomPositionToast;

Ví Dụ 3: Hiển Thị Toast với Vị Trí và Độ Lệch Tùy Chỉnh

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

const OffsetToast = () => {
  const showToast = () => {
    ToastAndroid.showWithGravityAndOffset(
      "This is a toast message",
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      0,
      50
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
};

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

export default OffsetToast;

Tùy Chỉnh ToastAndroid

Sử Dụng showWithGravity

Bạn có thể sử dụng phương thức showWithGravity để hiển thị thông báo toast với vị trí tùy chỉnh.

Ví dụ:

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

const GravityToast = () => {
  const showToast = () => {
    ToastAndroid.showWithGravity(
      "This is a toast message",
      ToastAndroid.SHORT,
      ToastAndroid.TOP
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
};

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

export default GravityToast;

Sử Dụng showWithGravityAndOffset

Bạn có thể sử dụng phương thức showWithGravityAndOffset để hiển thị thông báo toast với vị trí và độ lệch tùy chỉnh.

Ví dụ:

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

const CustomOffsetToast = () => {
  const showToast = () => {
    ToastAndroid.showWithGravityAndOffset(
      "This is a toast message",
      ToastAndroid.LONG,
      ToastAndroid.BOTTOM,
      0,
      100
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Show Toast" onPress={showToast} />
    </View>
  );
};

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

export default CustomOffsetToast;

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

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",
  },
});

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 showToast = () => {
  ToastAndroid.show("This is a toast message", ToastAndroid.SHORT);
};

<Button title="Show Toast" onPress={showToast} />;

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

Mặc dù ToastAndroid 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: ToastAndroid 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: ToastAndroid 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. Thời Gian Hiển Thị Cố Định: ToastAndroid chỉ hỗ trợ hai giá trị thời gian hiển thị là SHORT và LONG, không thể tùy chỉnh thời gian hiển thị cụ thể.

Kết Luận

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