React Native में Modal विंडो के कार्य की व्याख्या

Modal कंपोनेंट आपके UI कंटेंट के ऊपर एक कंटेंट व्यू प्रदर्शित करने में मदद करता है।

बेसिक Modal कंपोनेंट इस प्रकार है:

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

Modal कंपोनेंट के साथ काम करने के लिए आपको इसे पहले इम्पोर्ट करना होगा:

import { Modal } from "react-native";

Modal विंडो की बेसिक प्रॉपर्टीज इस प्रकार हैं:

उदाहरण 1: Modal विंडो प्रदर्शन दिखाना

Modal कंपोनेंट के साथ काम करने के लिए, आपको इसे पहले इम्पोर्ट करना होगा:

import { Modal } from "react-native";

Modal विंडो दिखाने के लिए, आप उस एनिमेशन को तय कर सकते हैं जो आप उस पर रखना चाहते हैं। विकल्प हैं slide, fade और none। नीचे दिए गए उदाहरण में हम टेक्स्ट और बटन के साथ एक साधारण Modal विंडो प्रदर्शित करना चाहते हैं जैसा कि नीचे दिखाया गया है:

<Modal
    animationType="slide"
    transparent={true}
    visible={isVisible}
>
    
        
            Modal Window Testing!
             {setModalVisiblility(false); }} />
        
    
</Modal>

isVisible वेरिएबल को visible प्रॉपर्टी पर असाइन किया गया है। यह डिफ़ॉल्ट रूप से false है यानी Modal विंडो डिफ़ॉल्ट रूप से नहीं दिखाई जाएगी। isVisible प्रॉपर्टी को निम्नानुसार इनिशियलाइज़ किया गया है:

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

setModalVisiblility isVisible वेरिएबल को false से true और इसके विपरीत अपडेट करेगा।

<Modal> कंपोनेंट के अंदर परिभाषित Close बटन setModalVisiblility(false) को कॉल करता है, यह isVisible को false कर देगा और Modal विंडो गायब हो जाएगी।

Modal विंडो प्रदर्शित करने के लिए <Modal> कंपोनेंट के बाहर एक बटन है जो setModalVisiblility(true) को कॉल करता है जैसा कि नीचे दिखाया गया है:

<View style={styles.centeredView}>
    
        
            
                Modal Window Testing!
                {setModalVisiblility(false); }} />
            
        
    
     {
        setModalVisiblility(true);
    }}
    />
</View>

यहां वह कार्यात्मक कोड दिया गया है जो Modal विंडो को दिखाता/छिपाता है।

import React, { useState } from "react";
import { Button, Alert, Modal, StyleSheet, Text, View } from "react-native";
const App = () => {
    const [isVisible, setModalVisiblility] = useState(false);
    return (
        
            
                
                    
                        Modal Window Testing!
                        {setModalVisiblility(false); }} />
                    
                
            
             {
                setModalVisiblility(true);
            }}
            />
        
    );
};
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;

आउटपुट