[리액트네이티브] react-native 체크 박스 만들기 (Expo)

checkbox 공식 문서

https://docs.expo.dev/versions/latest/sdk/checkbox/

위 링크에 들어가서 snack 실행해보면서 확인

      <View style={styles.section}>
        <Checkbox style={styles.checkbox} value={isChecked} onValueChange={setChecked} />
        <Text style={styles.paragraph}>Normal checkbox</Text>
      </View>

이 코드를 사용함

 

1. install 하기

npm install expo-checkbox

 

 

2.useState ture / false값으로 set해야함

const [isChecked, setChecked] = useState(false);

 

3. section css를 확인

section: {
    flexDirection: 'row',
    alignItems: 'center',
  },

4. paragraph, checkbox css 확인

 paragraph: {
    fontSize: 15,
  },
  checkbox: {
    margin: 8,
  },

 

 

5. onValueChange 값으로 true/false를 확인

 

 

---

여러 check box를 만드려면..

내가 생각한 로직은

1. 해당 check box 개수만큼의 크기를 가지고 있는 true/false 배열을 만들어준다

2. check box 컴포넌트에서 배열의 해당되는 인덱스 값의 값을 true/false를 바꿔준다. -> 다시 set해주기

3. 즉 이렇게 하면 되는진 모르겠는데 ,, 아무튼

const PageName = () =>{
	const [checkboxs, setCheckBoxs] = useState([false, false, false])
      
	return (
      <View style={styles.section}>
        <Checkbox style={styles.checkbox} value={checkboxs[0]} onValueChange={(e) => {setCheckBoxs(!checkboxs[0], chekboxs[1], checkboxs[2])}} />
        <Text style={styles.paragraph}>Normal checkbox</Text>
        
        <Checkbox style={styles.checkbox} value={checkboxs[1]} onValueChange={(e) => {setCheckBoxs(checkboxs[0], !chekboxs[1], checkboxs[2])}} />
        <Text style={styles.paragraph}>Normal checkbox</Text>
        
        <Checkbox style={styles.checkbox} value={checkboxs[2]} onValueChange={(e) => {setCheckBoxs(checkboxs[0], chekboxs[1], !checkboxs[2])}} />
        <Text style={styles.paragraph}>Normal checkbox</Text>
        
      </View>
    )
}
export default PageName;

 

다음에 테스트 해봐야겠다 함수를 생성해서 확인해도 될것이다