চেকবক্স একটি সাধারণ উপাদান যা আমরা প্রায়শই UI এ ব্যবহার করি। আমাদের কাছে প্রতিক্রিয়াশীলভাবে চেকবক্স দেখানোর কিছু দুর্দান্ত উপায় আছে।
মূল প্রতিক্রিয়া-নেটিভ প্যাকেজে চেকবক্স সমর্থন নেই এবং এটির সাথে কাজ করার জন্য আপনাকে অ্যাপকেজ ইনস্টল করতে হবে৷
চেকবক্স −
প্রদর্শন করতে নিম্নলিখিত প্যাকেজটি ইনস্টল করতে হবেnpm install --save-dev react-native-paper
মৌলিক চেকবক্স উপাদান নিম্নরূপ -
<Checkbox status={checkboxstatus} onPress={onCheckboxCheckedfunc} /> আসুন এখন চেকবক্স-
-এ কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য দেখি| প্রপস | বিবরণ |
|---|---|
| স্থিতি | স্ট্যাটাসে যে মান দেওয়া যেতে পারে তা চেক করা, আনচেক করা এবং অনির্ধারিত। |
| অক্ষম | মানটি বুলিয়ান। এটি চেকবক্স সক্রিয়/অক্ষম করতে ব্যবহার করা যেতে পারে। |
| অন প্রেস | চেকবক্স চেক করা হলে যে ফাংশনটিকে কল করা হবে। |
| রঙ | চেকবক্সে যে রঙ দিতে হবে |
| রঙ আনচেক করুন | অচেকডমোডে চেকবক্সের রঙ। |
এখানে একটি সাধারণ চেকবক্স প্রদর্শন -
useState চেকবক্সের জন্য চেক করা, চেক না করা স্ট্যাটাস সেট করতে ব্যবহার করা হয় যেমন নিচে দেখানো হয়েছে −
const [checked, setChecked] = React.useState(false);
চেক করা ভেরিয়েবলের ভিতরে স্টেট রক্ষণাবেক্ষণ করা হয় এবং এটি আপডেট করতে সেট চেকড পদ্ধতি ব্যবহার করা হয়।
চেক করা স্ট্যাটাস আপডেট করা হবে যখন ব্যবহারকারী চেকবক্সটি চেক/আনচেক করে নিচের দেখানো মত −
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 (
<SafeAreaView style={styles.container}>
<Checkbox
status={checked ? 'checked' : 'unchecked'}
onPress={() => {
setChecked(!checked);
}}
color={'green'}
uncheckColor={'red'}
/>
<Text>Checkbox</Text>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
});
export default MyComponent; আউটপুট
