मोडल घटक आपकी UI सामग्री के ऊपर सामग्री दृश्य प्रदर्शित करने में मदद करता है।
मूल मोडल घटक इस प्रकार है -
<मोडल एनीमेशन टाइप ="स्लाइड" पारदर्शी ={सत्य} दृश्यमान ={मोडल विज़िबल} ऑन रिक्वेस्टक्लोज़ ={() => {अलर्ट.अलर्ट ("मोडल बंद कर दिया गया है।"); }}> आपकी सामग्री यहां है
मोडल घटक के साथ काम करने के लिए आपको इसे पहले निम्नानुसार आयात करना होगा -
"प्रतिक्रिया-मूल" से आयात { Modal };
मोडल विंडो के मूल गुण इस प्रकार हैं -
| Sr.No | प्रॉप्स और विवरण |
|---|---|
| 1 | एनीमेशन प्रकार यह गुण मोडल विंडो को प्रदर्शित करने के लिए एनीमेशन को संभालता है। यह तीन मानों वाला एक एनम है - स्लाइड, फीका और कोई नहीं। |
| 2 | खारिज करने पर यह संपत्ति एक फ़ंक्शन में लेती है जिसे मोडल विंडो खारिज होने पर कॉल किया जाएगा। |
| 3 | ओरिएंटेशन चेंज पर कॉलबैक फ़ंक्शन जिसे तब कहा जाता है जब मोडल विंडो प्रदर्शित होने पर डिवाइस ओरिएंटेशन बदल जाता है। |
| 4 | शो पर फ़ंक्शन को प्रोप वैल्यू के रूप में पास किया जाता है जिसे मोडल विंडो दिखाए जाने पर कहा जाता है। |
| 5 | प्रस्तुति शैली यह संपत्ति मोडलविंडो के प्रदर्शन को संभालती है। उपलब्ध मान फुलस्क्रीन, पेजशीट, फॉर्मशीट और ओवरफुलस्क्रीन हैं। |
| 6 | पारदर्शी यह प्रोप एक पारदर्शी दृश्य देने या मोडल विंडो के लिए संपूर्ण दृश्य भरने का निर्णय लेगा। |
| 7 | दृश्यमान यह संपत्ति तय करेगी कि आपकी मोडल विंडो दिखाई दे रही है या नहीं। |
उदाहरण 1:मोडल विंडो डिस्प्ले दिखा रहा है
मॉडल घटक के साथ काम करने के लिए, आपको पहले इसे निम्नानुसार आयात करना होगा -
"प्रतिक्रिया-मूल" सेआयात { Modal }; एक मोडल विंडो दिखाने के लिए, आप उस एनीमेशन को तय कर सकते हैं जिस पर आप रखना चाहते हैं। विकल्प स्लाइड, फीका और कोई नहीं हैं। नीचे दिए गए उदाहरण में हम टेक्स्ट और बटन के साथ एक साधारण मोडल विंडो प्रदर्शित करना चाहते हैं जैसा कि नीचे दिखाया गया है -
<मोडल एनीमेशन टाइप ="स्लाइड" पारदर्शी ={सत्य} दृश्यमान ={इस दृश्य}> <शैली देखें ={शैली। केंद्र दृश्य}> <शैली देखें ={शैली। मायमोडल}> <पाठ शैली ={शैली। मोडल टेक्स्ट}> मोडल विंडो परीक्षण! <बटन शैली ={styles.modalButton} शीर्षक ="बंद करें" onPress={() => {setModalVisiblility(false); }}/>
दृश्यमान चर को दृश्यमान संपत्ति को सौंपा गया है। यह डिफ़ॉल्ट रूप से गलत है यानी मोडल विंडो डिफ़ॉल्ट रूप से नहीं दिखाई जाएगी। isVisible प्रॉपर्टी को इनिशियलाइज़ किया गया है जैसा कि नीचे दिखाया गया है -
const [isVisible, setModalVisiblility] =useState(false);
setModalVisiblility isVisible वैरिएबल को असत्य से सही और इसके विपरीत अपडेट करेगा।
<मोडल> घटक के अंदर परिभाषित बंद करें बटन setModalVisiblility(false) को कॉल करता है, इससे isVisible to false और मोडल विंडो गायब हो जाएगी।
मोडल विंडो को प्रदर्शित करने के लिए <मोडल> घटक के बाहर बटन होता है जो नीचे दिखाए गए अनुसार setModalVisiblility(true) को कॉल करता है -
शैली देखें={styles.centeredView}> <मोडल एनिमेशन टाइप ="स्लाइड" पारदर्शी ={सत्य} दृश्यमान ={isVisible}> <शैली देखें ={styles.centeredView}> <शैली देखें ={styles.myModal}> <पाठ शैली={styles.modalText}>मोडल विंडो परीक्षण! <बटन शैली={styles.modalButton} title="बंद करें" onPress={() =>{setModalVisiblility(false); }}/> <बटन शीर्षक ="मुझे क्लिक करें" onPress={() => {setModalVisiblility(true); }} />
यहां कार्य कोड है जो मोडल विंडो को दिखाता/छुपाता है।
<पूर्व>आयात प्रतिक्रिया, {useState} "प्रतिक्रिया" से; आयात {बटन, अलर्ट, मोडल, स्टाइलशीट, टेक्स्ट, व्यू} "रिएक्शन-नेटिव" से; कॉन्स्ट ऐप =() => {const [isVisible, setModalVisiblility] =यूजस्टेट (झूठा); वापसी ( <शैली देखें={styles.centeredView}> <मोडल एनिमेशन टाइप ="स्लाइड" पारदर्शी ={सत्य} दृश्यमान ={isVisible}> <शैली देखें ={styles.centeredView}> <शैली देखें ={styles.myModal}> <पाठ शैली={styles.modalText}>मोडल विंडो परीक्षण! <बटन शैली ={styles.modalButton} शीर्षक ="बंद करें" onPress={() =>{setModalVisiblility(false); }}/> <बटन शीर्षक ="क्लिक मी" onPress={() => {setModalVisiblility(true); }} /> );};const Styles =StyleSheet.create ({केंद्रित दृश्य:{फ्लेक्स:1, औचित्य सामग्री:"केंद्र", संरेखित करें:"केंद्र", मार्जिनटॉप:22}, myModal:{चौड़ाई:200, ऊंचाई:200, मार्जिन:20, पृष्ठभूमि रंग:"सफेद", बॉर्डररेडियस:20 , पैडिंग:35, संरेखित करें:"केंद्र", छाया रंग:"# 000", छाया ऑफसेट:{चौड़ाई:0, ऊंचाई:2}, शैडोओपेसिटी:0.30, शैडोरेडियस:4, एलिवेशन:5}, मोडलटेक्स्ट:{मार्जिनबॉटम:20, टेक्स्ट एलाइन:"सेंटर"}, मोडलबटन:{मार्जिनबॉटम:50,}});निर्यात डिफ़ॉल्ट ऐप; आउटपुट
