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
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;
Các Thuộc Tính Quan Trọng của Modal
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
<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
<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
<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
<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
<Modal onShow={() => console.log("Modal is shown")}>{/* Nội dung */}</Modal>
Ví Dụ Chi Tiết về Modal
Ví Dụ 1: Hiển Thị Modal Cơ Bản
javascript
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;
Ví Dụ 2: Hiển Thị Modal với Nhiều Nội Dung
javascript
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;
Ví Dụ 3: Hiển Thị Modal với Hoạt Hình Tùy Chỉnh
javascript
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;
Tùy Chỉnh Modal
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
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
.
Sử Dụng react-native-modal
Cài Đặt Thư Viện
bash
npm install react-native-modal
Sử Dụng Thư Viện
javascript
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
npm install react-native-dialog
Sử Dụng Thư Viện
javascript
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;