Giải thích hoạt động của cửa sổ Modal trong React Native

Thành phần phương thức giúp hiển thị chế độ xem nội dung phía trên nội dung giao diện người dùng của bạn.

Thành phần phương thức cơ bản như sau -

<Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => { Alert.alert("Modal has been closed."); }}> Your Content Here</Modal>

Để làm việc với thành phần Modal, trước tiên bạn cần nhập nó như sau -

import { Modal } from "react-native";

Các thuộc tính cơ bản của Modal Window như sau -

Ví dụ 1:Hiển thị Hiển thị Cửa sổ Phương thức

Để làm việc với thành phần Modal, trước tiên bạn cần nhập nó như sau -

import { Modal } from "react-native";

Để hiển thị một cửa sổ phương thức, bạn có thể quyết định hoạt ảnh bạn muốn có trên đó. Các tùy chọn là trượt, mờ dần và không có. Trong ví dụ dưới đây, chúng tôi muốn hiển thị một cửa sổ phương thức đơn giản với văn bản và nút trên đó như hình dưới đây -

<Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() => {setModalVisiblility(false); }}/>
      </View>
   </View>
</Modal>

Biến isVible được gán cho thuộc tính hiển thị. Nó là false theo mặc định, tức là cửa sổ phương thức sẽ không được hiển thị theo mặc định. Thuộc tính isVible được khởi tạo như hình dưới đây -

const [isVisible, setModalVisiblility] = useState(false);

SetModalVisiblility sẽ cập nhật biến isVible từ false thành true và ngược lại.

Nút Đóng được xác định bên trong thành phần gọi setModalVisiblility (false), điều này sẽ làm cho isVible thành false và cửa sổ phương thức sẽ biến mất.

Để hiển thị cửa sổ phương thức, có một nút bên ngoài thành phần gọi setModalVisiblility (true) như hình dưới đây -

<View style={styles.centeredView}>
   <Modal
      animationType="slide"
      transparent={true}
      visible={isVisible}
   >
   <View style={styles.centeredView}>
      <View style={styles.myModal}>
         <Text style={styles.modalText}>Modal Window Testing!</Text>
            <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
            </View>
         </View>
      </Modal>
      <Button title="Click Me" onPress={() => {
         setModalVisiblility(true);
      }}
   />
</View>

Đây là mã làm việc hiển thị / ẩn cửa sổ phương thức.

import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
   const [isVisible, setModalVisiblility] = useState(false);
   return (
      <View style={styles.centeredView}>
         <Modal
            animationType="slide"
            transparent={true}
            visible={isVisible}
         >
         <View style={styles.centeredView}>
            <View style={styles.myModal}>
               <Text style={styles.modalText}>Modal Window Testing!</Text>
                  <Button style={styles.modalButton} title="Close" onPress={() =>{setModalVisiblility(false); }}/>
                  </View>
               </View>
            </Modal>
            <Button title="Click Me" onPress={() => {
               setModalVisiblility(true);
            }}
         />
      </View>
   );
};
const styles = StyleSheet.create({
   centeredView: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      marginTop: 22
   },
   myModal: {
      width:200,
      height:200,
      margin: 20,
      backgroundColor: "white",
      borderRadius: 20,
      padding: 35,
      alignItems: "center",
      shadowColor: "#000",
      shadowOffset: {
         width: 0,
         height: 2
      },
      shadowOpacity: 0.30,
      shadowRadius: 4,
      elevation: 5
   },
   modalText: {
      marginBottom: 20,
      textAlign: "center"
   },
   modalButton: {
      marginBottom: 50,
   }
});
export default App;

Đầu ra