[ReactNative] CheckBox 사용하기

hyeonze·2022년 2월 7일

인턴쉽

목록 보기
4/8

임포트

import BouncyCheckbox from “react-native-bouncy-checkbox”;

사용

<BouncyCheckbox 
  unfillColor="#EDEEEA"
  fillColor="#C2FDAC"
  iconStyle={{
    borderRadius: 5,
    borderColor: "white",
  }}
  disableBuiltInState={false}
  isChecked={isItChecked(id)}
  onPress={() => {handleOption(id, price)}}
/>

map

const ReceiptMethods = () => {
  const methods = ["deliver", "takeout", "eatin"];

  return (
    <>
    {methods.map((method, index) => {
      return (
      <View style={styles.receiptMethod}>
      <BouncyCheckbox
        unfillColor="#EDEEEA"
        fillColor="#C2FDAC"
        iconStyle={{
          width: 17,
          height: 17,
          borderRadius: 2,
          borderColor: "white",
        }}
        disableBuiltInState={true}
        isChecked={method === confirmOrderMockData.receiveType ? true : false}
      />
      <Text style={styles.receiptMethodText}>
        {method === "takeout" ? "포장" : null}
        {method === "eatin" ? "미리주문" : null}
        {method === "deliver" ? "배달" : null}
      </Text>
    </View>
    )})}
    </>
    )
};
profile
Advanced thinking should be put into advanced code.

0개의 댓글