Làm thế nào để hiển thị một hộp kiểm trong reactnative?

Hộp kiểm là một thành phần phổ biến mà chúng tôi thường sử dụng trên giao diện người dùng. Chúng tôi có một số cách hiển thị hộp kiểm trong reactnative.

Gói phản ứng gốc không có hỗ trợ hộp kiểm và bạn cần cài đặt gói ứng dụng để hoạt động với nó.

Gói sau phải được cài đặt để hiển thị hộp kiểm -

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

Thành phần hộp kiểm cơ bản như sau -

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

Bây giờ chúng ta hãy xem một số thuộc tính quan trọng trên hộp kiểm -

Đây là một màn hình hộp kiểm đơn giản -

UseState được sử dụng để đặt trạng thái đã chọn, đã bỏ chọn cho hộp kiểm như hình dưới đây -

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

Trạng thái được duy trì bên trong biến đã kiểm tra và phương thức setChecked được sử dụng để cập nhật nó.

Trạng thái đã chọn sẽ được cập nhật khi người dùng chọn / bỏ chọn hộp kiểm như hình dưới đây -

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

Mã hoàn chỉnh như sau -

Ví dụ

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;

Đầu ra