अलर्ट घटक प्रदर्शित संदेश के आधार पर उपयोगकर्ता से पुष्टि जानने के लिए एक डायलॉग बॉक्स यानी एक शीर्षक, संदेश, बटन के साथ उपयोगकर्ता को पॉप अप दिखाने में मदद करता है।
अलर्ट का मूल घटक इस प्रकार है -
Alert.alert('yourtile', 'yourmessage', [yourbuttons], 'Options') अलर्ट घटक के साथ काम करने के लिए आपको इसे निम्नानुसार आयात करना होगा -
'react-native' से आयात {अलर्ट}; पॉप-अप प्राप्त करने के लिए आपको केवल अलर्ट.अलर्ट () फ़ंक्शन को कॉल करना होगा। अलर्ट () में चार पैरामीटर हैं और यह शीर्षक, संदेश, बटन और विकल्प है। शीर्षक अनिवार्य परम है और बाकी वैकल्पिक हैं।
अलर्ट.अलर्ट () -
. का उपयोग करने के तरीके पर एक सरल उदाहरण यहां दिया गया हैअलर्ट.अलर्ट ("हाय", "क्या आप जारी रखना चाहते हैं?", [{पाठ:"बाद में", ऑनप्रेस:() => कंसोल.लॉग ("उपयोगकर्ता बाद में दबाया गया")}, { पाठ:" रद्द करें", ऑनप्रेस:() => कंसोल.लॉग ("दबाया गया रद्द करें"), शैली:"रद्द करें"}, {पाठ:"ओके", ऑनप्रेस:() => कंसोल.लॉग ("ओके दबाया गया")}] , {रद्द करने योग्य:झूठा}); यहां शीर्षक 'हाय' है, संदेश है 'क्या आप जारी रखना चाहते हैं', जो बटन मैं संवाद बॉक्स में दिखाना चाहता हूं वे बाद में, रद्द करें और ठीक हैं। प्रत्येक बटन के लिए onPress ईवेंट जोड़ा जाता है, जो एक कंसोल संदेश प्रदर्शित करता है। अंतिम विकल्प परम है। इसका उपयोग पॉप-अप के व्यवहार को नियंत्रित करने के लिए किया जा सकता है। Android पर डिफ़ॉल्ट रूप से पॉप-अप सीमा के बाहर क्लिक करने पर पॉप-अप बंद हो जाएगा। इसे अक्षम करने के लिए आप विकल्प परम के रूप में {cancelable:false } का उपयोग कर सकते हैं। जब आप पॉप-अप क्षेत्र के बाहर क्लिक करते हैं तो यह बंद नहीं होगा क्योंकि रद्द करने योग्य सेट असत्य है।
IOS के मामले में आप कितने भी बटन निर्दिष्ट कर सकते हैं, लेकिन Android में आप तीन बटन का उपयोग कर सकते हैं। एंड्रॉइड में तीन बटनों में एक तटस्थ, नकारात्मक और एक सकारात्मक बटन की अवधारणा है - उदाहरण के लिए -
-
यदि एक बटन निर्दिष्ट किया गया है, तो यह 'सकारात्मक' जैसा होगा, उदाहरण के लिए 'ठीक'।
-
यदि दो बटन हैं तो यह पहला 'नकारात्मक' और दूसरा 'सकारात्मक' होगा। उदाहरण के लिए 'रद्द करें' और 'ठीक'।
-
यदि तीन बटन हैं तो यह 'तटस्थ', 'नकारात्मक', 'सकारात्मक' होगा। उदाहरण के लिए 'बाद में', 'रद्द करें', और 'ठीक'
अलर्ट घटक की कार्यप्रणाली को दर्शाने वाला एक कार्यशील उदाहरण यहां दिया गया है -
उदाहरण 1:अलर्ट बॉक्स का प्रदर्शन
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आप जारी रखना चाहते हैं?", [{पाठ:"बाद में", ऑनप्रेस:() => कंसोल.लॉग ("उपयोगकर्ता बाद में दबाया गया")}, {पाठ:"रद्द करें", ऑनप्रेस:() => कंसोल.लॉग ( "रद्द करें दबाया"), शैली:"रद्द करें"}, {पाठ:"ठीक", ऑनप्रेस:() => कंसोल.लॉग ("ठीक दबाया गया")}], {रद्द करने योग्य:झूठा}); वापसी ( <देखें शैली ={{फ्लेक्स:1, औचित्य सामग्री:'केंद्र', मार्जिन:15}}> <बटन शीर्षक ="मुझे क्लिक करें" रंग ="# 9C27B0" onPress={testAlert} /> );}डिफ़ॉल्ट ऐप निर्यात करें;आउटपुट
उदाहरण 2:Android के लिए {cancelable:true} का उपयोग करना
नीचे दिए गए उदाहरण में शीर्षक, संदेश और बटन के साथ {रद्द करने योग्य:सत्य} का उपयोग किया गया है। तो अलर्ट बॉक्स नीचे जैसा दिखेगा -
अलर्ट.अलर्ट ("हाय", "क्या आप जारी रखना चाहते हैं?", [{पाठ:"बाद में", ऑनप्रेस:() => कंसोल.लॉग ("उपयोगकर्ता बाद में दबाया गया")}, { पाठ:" रद्द करें", ऑनप्रेस:() => कंसोल.लॉग ("दबाया गया रद्द करें"), शैली:"रद्द करें"}, {पाठ:"ओके", ऑनप्रेस:() => कंसोल.लॉग ("ओके दबाया गया")}] , {रद्द करने योग्य:सत्य}); पूर्ण कार्य उदाहरण इस प्रकार है -
<पूर्व> 'प्रतिक्रिया' से आयात प्रतिक्रिया; आप जारी रखना चाहते हैं?", [{पाठ:"बाद में", ऑनप्रेस:() => कंसोल.लॉग ("उपयोगकर्ता बाद में दबाया गया")}, {पाठ:"रद्द करें", ऑनप्रेस:() => कंसोल.लॉग ( "रद्द करें दबाया"), शैली:"रद्द करें"}, {पाठ:"ठीक", ऑनप्रेस:() => कंसोल.लॉग ("ठीक दबाया गया")}], {रद्द करने योग्य:सत्य}); वापसी ( <देखें शैली ={{फ्लेक्स:1, औचित्य सामग्री:'केंद्र', मार्जिन:15}}> <बटन शीर्षक ="मुझे क्लिक करें" रंग ="# 9C27B0" onPress={testAlert} /> );}डिफ़ॉल्ट ऐप निर्यात करें;जब आप पॉप-अप क्षेत्र के बाहर क्लिक करेंगे तो यह बंद हो जाएगा।
आउटपुट
