React Native में Alerts डायलॉग बॉक्स के साथ कैसे काम करें

Alert कंपोनेंट उपयोगकर्ता को एक डायलॉग बॉक्स यानी पॉप-अप दिखाने में मदद करता है जिसमें शीर्षक, संदेश, बटन होते हैं ताकि प्रदर्शित संदेश के आधार पर उपयोगकर्ता से पुष्टि प्राप्त की जा सके।

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

Alert.alert('yourtile', 'yourmessage', [yourbuttons], 'options')

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

import { Alert } from 'react-native';

पॉप-अप प्राप्त करने के लिए आपको बस Alert.alert() फ़ंक्शन को कॉल करना होगा। alert() चार पैरामीटर लेता है: शीर्षक, संदेश, बटन और विकल्प। शीर्षक अनिवार्य पैरामीटर है और बाकी वैकल्पिक हैं।

Alert.alert() का उपयोग करने का एक सरल उदाहरण यहां दिया गया है:

Alert.alert(
    "Hi",
    "Do you want to continue?",
    [
        {
            text: "Later",
            onPress: () => console.log("User pressed Later")
        },
        {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
        },
        {
            text: "OK",
            onPress: () => console.log("OK Pressed")
        }
    ],
    { cancelable: false }
);

यहां शीर्षक 'Hi' है, संदेश 'Do you want to continue' है, डायलॉग बॉक्स में दिखाने के लिए बटन Later, Cancel और OK हैं। प्रत्येक बटन के लिए onPress इवेंट जोड़ा गया है जो एक कंसोल संदेश प्रदर्शित करता है। अंतिम विकल्प पैरामीटर है, इसका उपयोग पॉप-अप के व्यवहार को नियंत्रित करने के लिए किया जा सकता है। Android पर डिफ़ॉल्ट रूप से पॉप-अप बंद हो जाएगा यदि पॉप-अप सीमा के बाहर क्लिक किया जाता है। इसे अक्षम करने के लिए आप विकल्प पैरामीटर के रूप में { cancelable: false } का उपयोग कर सकते हैं। जब आप पॉप-अप क्षेत्र के बाहर क्लिक करते हैं तो यह cancelable को false पर सेट होने के कारण बंद नहीं होगा।

iOS के मामले में आप कितने भी बटन निर्दिष्ट कर सकते हैं, लेकिन Android में आप तीन बटनों का उपयोग कर सकते हैं। Android में तीन बटनों की एक अवधारणा है: न्यूट्रल, नेगेटिव और पॉजिटिव बटन, उदाहरण के लिए:

• यदि एक बटन निर्दिष्ट है, तो यह 'पॉजिटिव' जैसा होगा, उदाहरण के लिए 'OK'।

• यदि दो बटन हैं तो पहला 'नेगेटिव' और दूसरा 'पॉजिटिव' होगा। उदाहरण के लिए 'Cancel' और 'OK'।

• यदि तीन बटन हैं तो यह 'न्यूट्रल', 'नेगेटिव', 'पॉजिटिव' होंगे। उदाहरण के लिए 'Later', 'Cancel', और 'OK'।

Alert कंपोनेंट के कार्य को दिखाने वाला एक कार्यात्मक उदाहरण यहां दिया गया है:

उदाहरण 1: Alert बॉक्स का प्रदर्शन

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
    const testAlert = () =>
        Alert.alert(
            "Hi",
            "Do you want to continue?",
            [
                {
                    text: "Later",
                    onPress: () => console.log("User pressed Later")
                },
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                { text: "OK", onPress: () => console.log("OK Pressed") }
            ],
            { cancelable: false }
        );
    return (
        
            
        
    );
}
export default App;

आउटपुट

उदाहरण 2: Android के लिए { cancelable: true } का उपयोग

नीचे दिए गए उदाहरण में शीर्षक, संदेश और बटनों के साथ { cancelable: true } का उपयोग किया गया है। इसलिए अलर्ट बॉक्स नीचे दिखाए अनुसार दिखाई देगा:

Alert.alert(
    "Hi",
    "Do you want to continue?",
    [
        {
            text: "Later",
            onPress: () => console.log("User pressed Later")
        },
        {
            text: "Cancel",
            onPress: () => console.log("Cancel Pressed"),
            style: "cancel"
        },
        { text: "OK", onPress: () => console.log("OK Pressed") }
    ],
    { cancelable: true }
);

पूरा कार्यात्मक उदाहरण इस प्रकार है:

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
    const testAlert = () =>
        Alert.alert(
            "Hi",
            "Do you want to continue?",
            [
                {
                    text: "Later",
                    onPress: () => console.log("User pressed Later")
                },
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                { text: "OK", onPress: () => console.log("OK Pressed") }
            ],
            { cancelable: true }
        );
    return (
        
            
        
    );
}
export default App;

जब आप पॉप-अप क्षेत्र के बाहर क्लिक करते हैं तो यह बंद हो जाएगा।

आउटपुट