KUNGFU TECH vietnam

Khóa học react-native

ActionSheetIOS trong React Native

0 phút đọc

ActionSheetIOS là một module trong React Native cho phép bạn hiển thị các action sheet native trên các thiết bị iOS. Action sheet là một loại thông báo bật lên từ dưới cùng của màn hình, cung cấp cho người dùng một danh sách các tùy chọn để chọn. ActionSheetIOS cung cấp các phương thức để hiển thị các action sheet với nhiều tùy chọn khác nhau, bao gồm các nút hủy, nút phá hủy, và các nút tùy chỉnh.

Cú Pháp Cơ Bản

Để sử dụng ActionSheetIOS 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ị action sheet.

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

const App = () => {
  const showActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ["Cancel", "Save", "Delete"],
        cancelButtonIndex: 0,
        destructiveButtonIndex: 2,
      },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          console.log("Cancel Pressed");
        } else if (buttonIndex === 1) {
          console.log("Save Pressed");
        } else if (buttonIndex === 2) {
          console.log("Delete Pressed");
        }
      }
    );
  };

  return (
    <View style={styles.container}>
      <Button title="Show Action Sheet" onPress={showActionSheet} />
    </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 ActionSheetIOS

showActionSheetWithOptions

Phương thức showActionSheetWithOptions được sử dụng để hiển thị một action sheet với các tùy chọn tùy chỉnh. Nó nhận vào hai tham số: một đối tượng chứa các tùy chọn và một hàm callback để xử lý sự kiện khi người dùng chọn một tùy chọn.

Cú pháp:

ActionSheetIOS.showActionSheetWithOptions(options, callback);

Ví dụ:

ActionSheetIOS.showActionSheetWithOptions(
  {
    options: ["Cancel", "Save", "Delete"],
    cancelButtonIndex: 0,
    destructiveButtonIndex: 2,
  },
  (buttonIndex) => {
    if (buttonIndex === 0) {
      console.log("Cancel Pressed");
    } else if (buttonIndex === 1) {
      console.log("Save Pressed");
    } else if (buttonIndex === 2) {
      console.log("Delete Pressed");
    }
  }
);

dismissActionSheet

Phương thức dismissActionSheet được sử dụng để đóng action sheet hiện tại. Nếu không có action sheet nào đang hiển thị, một cảnh báo sẽ được hiển thị.

Cú pháp:

ActionSheetIOS.dismissActionSheet();

Ví dụ:

ActionSheetIOS.dismissActionSheet();

showShareActionSheetWithOptions

Phương thức showShareActionSheetWithOptions được sử dụng để hiển thị một share sheet, cho phép người dùng chia sẻ nội dung. Nó nhận vào ba tham số: một đối tượng chứa các tùy chọn chia sẻ, một hàm callback để xử lý lỗi, và một hàm callback để xử lý thành công.

Cú pháp:

ActionSheetIOS.showShareActionSheetWithOptions(
  options,
  failureCallback,
  successCallback
);

Ví dụ:

ActionSheetIOS.showShareActionSheetWithOptions(
  {
    url: "https://reactnative.dev",
    message: "Check out this website!",
  },
  (error) => {
    console.error(error);
  },
  (success, method) => {
    if (success) {
      console.log(`Shared via ${method}`);
    } else {
      console.log("Share canceled");
    }
  }
);

Các Tùy Chọn của ActionSheetIOS

Dưới đây là một số tùy chọn mà bạn có thể sử dụng với showActionSheetWithOptions:

  • options: Một mảng các chuỗi hoặc phần tử React đại diện cho các nút trong action sheet.
  • cancelButtonIndex: Chỉ số của nút hủy trong mảng options.
  • destructiveButtonIndex: Chỉ số của nút phá hủy trong mảng options.
  • title: Tiêu đề hiển thị phía trên action sheet.
  • message: Thông điệp hiển thị dưới tiêu đề.
  • tintColor: Màu sắc của các nút không phải là nút phá hủy.
  • disabledButtonIndices: Một mảng các chỉ số của các nút bị vô hiệu hóa.
  • userInterfaceStyle: Kiểu giao diện người dùng, có thể là light hoặc dark.

Ví Dụ Chi Tiết về ActionSheetIOS

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

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

const BasicActionSheet = () => {
  const showActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ["Cancel", "Save", "Delete"],
        cancelButtonIndex: 0,
        destructiveButtonIndex: 2,
      },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          console.log("Cancel Pressed");
        } else if (buttonIndex === 1) {
          console.log("Save Pressed");
        } else if (buttonIndex === 2) {
          console.log("Delete Pressed");
        }
      }
    );
  };

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

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

export default BasicActionSheet;

Ví Dụ 2: Hiển Thị Action Sheet với Tiêu Đề và Thông Điệp

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

const TitledActionSheet = () => {
  const showActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        title: "Action Sheet Title",
        message: "This is a message below the title",
        options: ["Cancel", "Save", "Delete"],
        cancelButtonIndex: 0,
        destructiveButtonIndex: 2,
      },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          console.log("Cancel Pressed");
        } else if (buttonIndex === 1) {
          console.log("Save Pressed");
        } else if (buttonIndex === 2) {
          console.log("Delete Pressed");
        }
      }
    );
  };

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

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

export default TitledActionSheet;

Ví Dụ 3: Hiển Thị Share Sheet

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

const ShareSheet = () => {
  const showShareSheet = () => {
    ActionSheetIOS.showShareActionSheetWithOptions(
      {
        url: "https://reactnative.dev",
        message: "Check out this website!",
      },
      (error) => {
        console.error(error);
      },
      (success, method) => {
        if (success) {
          console.log(`Shared via ${method}`);
        } else {
          console.log("Share canceled");
        }
      }
    );
  };

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

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

export default ShareSheet;

Tùy Chỉnh ActionSheetIOS

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 action sheet.

Ví dụ:

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

const CustomActionSheet = () => {
  const showActionSheet = () => {
    ActionSheetIOS.showActionSheetWithOptions(
      {
        options: ["Cancel", "Save", "Delete"],
        cancelButtonIndex: 0,
        destructiveButtonIndex: 2,
        tintColor: "blue",
        userInterfaceStyle: "dark",
      },
      (buttonIndex) => {
        if (buttonIndex === 0) {
          console.log("Cancel Pressed");
        } else if (buttonIndex === 1) {
          console.log("Save Pressed");
        } else if (buttonIndex === 2) {
          console.log("Delete Pressed");
        }
      }
    );
  };

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

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

export default CustomActionSheet;

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

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 showActionSheet = () => {
  ActionSheetIOS.showActionSheetWithOptions(
    {
      options: ["Cancel", "Save", "Delete"],
      cancelButtonIndex: 0,
      destructiveButtonIndex: 2,
    },
    (buttonIndex) => {
      if (buttonIndex === 0) {
        console.log("Cancel Pressed");
      } else if (buttonIndex === 1) {
        console.log("Save Pressed");
      } else if (buttonIndex === 2) {
        console.log("Delete Pressed");
      }
    }
  );
};

<Button title="Show Action Sheet" onPress={showActionSheet} />;

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

Mặc dù ActionSheetIOS 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ợ iOS: ActionSheetIOS chỉ hoạt động trên các thiết bị iOS và không có tác dụng trên Android.
  2. Tùy Chỉnh Giao Diện: ActionSheetIOS 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

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

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

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