체크박스는 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;
출력