반응형에서 확인란을 표시하는 방법은 무엇입니까?

체크박스는 UI에서 자주 사용하는 일반적인 구성 요소입니다. 반응형에서 확인란을 표시하는 몇 가지 멋진 방법이 있습니다.

핵심 react-native 패키지에는 체크박스 지원이 없으며 함께 작동하려면 패키지를 설치해야 합니다.

체크박스를 표시하려면 다음 패키지를 설치해야 합니다 -

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

기본 체크박스 구성요소는 다음과 같습니다 -

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

이제 확인란에 대한 몇 가지 중요한 속성을 살펴보겠습니다.

다음은 간단한 체크박스 표시입니다 -

useState는 아래와 같이 체크박스의 checked , unchecked 상태를 설정하는 데 사용됩니다. -

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 (
      <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;

출력