จะแสดงช่องทำเครื่องหมายใน reactnative ได้อย่างไร?

ช่องทำเครื่องหมายเป็นองค์ประกอบทั่วไปที่เรามักใช้ใน UI เรามีวิธีเจ๋งๆ ในการแสดงช่องทำเครื่องหมายในปฏิกิริยาตอบสนอง

แพ็คเกจ react-native หลักไม่มีการรองรับช่องทำเครื่องหมาย และคุณต้องติดตั้ง apackage เพื่อใช้งาน

ต้องติดตั้งแพ็คเกจต่อไปนี้เพื่อแสดงช่องทำเครื่องหมาย -

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

ส่วนประกอบช่องทำเครื่องหมายพื้นฐานมีดังนี้ -

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

ให้เราดูคุณสมบัติที่สำคัญบางอย่างในช่องกาเครื่องหมาย -

นี่คือการแสดงช่องทำเครื่องหมายอย่างง่าย -

useState ใช้เพื่อกำหนดสถานะที่ตรวจสอบ ไม่ได้ตรวจสอบสำหรับช่องทำเครื่องหมายดังที่แสดงด้านล่าง -

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

สถานะจะคงอยู่ภายในตัวแปรที่ตรวจสอบแล้ว และใช้เมธอด 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 (
      <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;

ผลลัพธ์