React Native में चेकबॉक्स कैसे दिखाएं

चेकबॉक्स एक सामान्य कंपोनेंट है जिसे हम अक्सर UI पर उपयोग करते हैं। React Native में चेकबॉक्स दिखाने के कुछ अच्छे तरीके हैं।

कोर react-native पैकेज में चेकबॉक्स सपोर्ट नहीं है और आपको इसके साथ काम करने के लिए एक पैकेज इंस्टॉल करना होगा।

चेकबॉक्स प्रदर्शित करने के लिए निम्नलिखित पैकेज इंस्टॉल करना होगा:

npm install --save-dev react-native-paper

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

<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} />

आइए अब चेकबॉक्स पर कुछ महत्वपूर्ण प्रॉपर्टीज देखते हैं:

यहां एक सरल चेकबॉक्स प्रदर्शन है:

useState का उपयोग चेकबॉक्स के लिए चेक्ड, अनचेक्ड स्टेटस सेट करने के लिए किया जाता है जैसा कि नीचे दिखाया गया है:

const [checked, setChecked] = React.useState(false);

स्टेट को checked वेरिएबल के अंदर मेंटेन किया जाता है और इसे अपडेट करने के लिए setChecked मेथड का उपयोग किया जाता है।

जब उपयोगकर्ता चेकबॉक्स को चेक/अनचेक करता है तो चेक्ड स्टेटस अपडेट हो जाएगा जैसा कि नीचे दिखाया गया है:

onPress={() => {
    setChecked(!checked);
}}

पूरा कोड इस प्रकार है:

उदाहरण

import * as React from 'react';
import { StyleSheet, Text, SafeAreaView } from 'react-native';
import { Checkbox } from 'react-native-paper';
const MyComponent = () => {
    const [checked, setChecked] = React.useState(false);
    return (
        
             {
                    setChecked(!checked);
                }}
                color={'green'}
                uncheckColor={'red'}
            />
            Checkbox
        
    );
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
});
export default MyComponent;

आउटपुट