Modal trong React Native

Modal là một component trong React Native cho phép bạn hiển thị các hộp thoại (dialog) hoặc các giao diện người dùng khác trên màn hình. Modal thường được sử dụng để hiển thị các thông báo, biểu mẫu, hoặc các tùy chọn mà người dùng cần tương tác trước khi quay lại giao diện chính. Modal cung cấp các phương thức và thuộc tính để bạn có thể tùy chỉnh và kiểm soát hành vi của nó, giúp tạo ra các trải nghiệm người dùng mượt mà và hiệu quả.

Cú Pháp Cơ Bản

Để sử dụng Modal 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 hành vi và giao diện của modal.

javascript Copy

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

const App = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello, I am a modal!</Text>
            <Button
              title="Hide Modal"
              onPress={() => setModalVisible(!modalVisible)}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
});

export default App;

visible

Thuộc tính visible xác định liệu modal có hiển thị hay không. Đây là một thuộc tính bắt buộc và có giá trị boolean.

Ví dụ:

javascript Copy

<Modal visible={modalVisible}>{/* Nội dung */}</Modal>

animationType

Thuộc tính animationType xác định kiểu hoạt hình khi modal xuất hiện và biến mất. Các giá trị có thể bao gồm none, slide, và fade.

Ví dụ:

javascript Copy

<Modal animationType="slide">{/* Nội dung */}</Modal>

transparent

Thuộc tính transparent xác định liệu nền của modal có trong suốt hay không. Mặc định là false.

Ví dụ:

javascript Copy

<Modal transparent={true}>{/* Nội dung */}</Modal>

onRequestClose

Thuộc tính onRequestClose là một hàm callback được gọi khi người dùng yêu cầu đóng modal. Điều này rất quan trọng trên các thiết bị Android, nơi người dùng có thể nhấn nút quay lại để đóng modal.

Ví dụ:

javascript Copy

<Modal onRequestClose={() => setModalVisible(false)}>{/* Nội dung */}</Modal>

onShow

Thuộc tính onShow là một hàm callback được gọi khi modal được hiển thị.

Ví dụ:

javascript Copy

<Modal onShow={() => console.log("Modal is shown")}>{/* Nội dung */}</Modal>

javascript Copy

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

const BasicModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello, I am a modal!</Text>
            <Button
              title="Hide Modal"
              onPress={() => setModalVisible(!modalVisible)}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
});

export default BasicModal;

javascript Copy

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

const MultiContentModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Enter your details</Text>
            <TextInput placeholder="Name" style={styles.input} />
            <TextInput placeholder="Email" style={styles.input} />
            <Button
              title="Submit"
              onPress={() => setModalVisible(!modalVisible)}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
  input: {
    height: 40,
    borderColor: "gray",
    borderWidth: 1,
    marginBottom: 10,
    paddingHorizontal: 10,
    width: "100%",
  },
});

export default MultiContentModal;

javascript Copy

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

const CustomAnimationModal = () => {
  const [modalVisible, setModalVisible] = useState(false);
  const [fadeAnim] = useState(new Animated.Value(0));

  const showModal = () => {
    setModalVisible(true);
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();
  };

  const hideModal = () => {
    Animated.timing(fadeAnim, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }).start(() => {
      setModalVisible(false);
    });
  };

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={showModal} />
      <Modal
        transparent={true}
        visible={modalVisible}
        onRequestClose={hideModal}
      >
        <View style={styles.centeredView}>
          <Animated.View style={[styles.modalView, { opacity: fadeAnim }]}>
            <Text style={styles.modalText}>
              Hello, I am a modal with custom animation!
            </Text>
            <Button title="Hide Modal" onPress={hideModal} />
          </Animated.View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
});

export default CustomAnimationModal;

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 modal.

Ví dụ:

javascript Copy

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

const CustomModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>This is a custom modal</Text>
            <Button
              title="Hide Modal"
              onPress={() => setModalVisible(!modalVisible)}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "rgba(0,0,0,0.5)",
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center",
  },
});

export default CustomModal;

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ư react-native-modal hoặc react-native-dialog.

Cài Đặt Thư Viện

bash Copy

npm install react-native-modal

Sử Dụng Thư Viện

javascript Copy

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

const CustomModal = () => {
  const [isModalVisible, setModalVisible] = useState(false);

  const toggleModal = () => {
    setModalVisible(!isModalVisible);
  };

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={toggleModal} />
      <Modal isVisible={isModalVisible}>
        <View style={styles.modalContent}>
          <Text>Hello!</Text>
          <Button title="Hide Modal" onPress={toggleModal} />
        </View>
      </Modal>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  modalContent: {
    backgroundColor: "white",
    padding: 22,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 4,
    borderColor: "rgba(0, 0, 0, 0.1)",
  },
});

export default CustomModal;

Sử Dụng react-native-dialog

Cài Đặt Thư Viện

bash Copy

npm install react-native-dialog

Sử Dụng Thư Viện

javascript Copy

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

const CustomDialog = () => {
  const [visible, setVisible] = useState(false);

  const showDialog = () => {
    setVisible(true);
  };

  const handleCancel = () => {
    setVisible(false);
  };

  const handleOK = () => {
    setVisible(false);
    console.log("OK Pressed");
  };

  return (
    <View style={styles.container}>
      <Button title="Show Dialog" onPress={showDialog} />
      <Dialog.Container visible={visible}>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>
          This is a custom dialog message.
        </Dialog.Description>
        <Dialog.Button label="Cancel" onPress={handleCancel} />
        <Dialog.Button label="OK" onPress={handleOK} />
      </Dialog.Container>
    </View>
  );
};

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

export default CustomDialog;

Cú Pháp Cơ Bản

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

visible

animationType

transparent

onRequestClose

onShow

Ví Dụ Chi Tiết về Modal

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

Ví Dụ 2: Hiển Thị Modal với Nhiều Nội Dung

Ví Dụ 3: Hiển Thị Modal với Hoạt Hình Tùy Chỉnh

Tùy Chỉnh Modal

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

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

Sử Dụng react-native-modal

Sử Dụng react-native-dialog

Bình luận