React Native에서 처음부터 라디오 버튼 만들기

처음부터 라디오 버튼을 만드는 것은 매우 쉽습니다. 라디오 버튼 기능을 사용하려면 몇 단계만 거치면 됩니다.

라디오 버튼의 UI 및 디자인을 만듭니다.

라디오 버튼 상태를 초기화합니다.

클릭 시 핸들 기능을 기록합니다.

라디오 버튼을 재사용 가능하게 만드십시오.

라디오 버튼 UI 만들기

라디오 버튼과 클릭 가능한 라디오 버튼 텍스트가 모두 필요하므로 여기에서 둘 다 래핑합니다TouchableOpacity.

 <View style={styles.radioButtonContainer}>
   <TouchableOpacity onPress={() => {}} style={styles.radioButton}>
     <View style={styles.radioButtonIcon} />
   </TouchableOpacity>
   <TouchableOpacity onPress={() => {}}>
     <Text style={styles.radioButtonText}>Yes</Text>
   </TouchableOpacity>
 </View>

스타일은 다음과 같을 것입니다.

  radioButtonContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginRight: 45
  },
  radioButton: {
    height: 20,
    width: 20,
    backgroundColor: "#F8F8F8",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#E6E6E6",
    alignItems: "center",
    justifyContent: "center"
  },
  radioButtonIcon: {
    height: 14,
    width: 14,
    borderRadius: 7,
    backgroundColor: "#98CFB6"
  },
  radioButtonText: {
    fontSize: 16,
    marginLeft: 16
  }

이후 스타일 제공

라디오 버튼의 초기화 상태

배열에 라디오 버튼 상태를 만들고 소품 ID, 값, 이름 및 선택 항목을 제공합니다.

  const [isLiked, setIsLiked] = useState([
    { id: 1, value: true, name: "Yes", selected: false },
    { id: 2, value: false, name: "No", selected: false }
  ]);

이제 라디오 버튼 요소를 반복합니다.

  <Text style={styles.text}>Do you like react native?</Text>
  {isLiked.map((item) => (
     <View style={styles.radioButtonContainer}>
       <TouchableOpacity onPress={() => {}} style={styles.radioButton}>
         <View style={styles.radioButtonIcon} />
       </TouchableOpacity>
       <TouchableOpacity onPress={() => {}}>
         <Text style={styles.radioButtonText}>{item.name}</Text>
       </TouchableOpacity>
     </View>
  ))}

핸들 클릭 기능 만들기

이제 라디오 버튼에 대한 핸들 클릭 기능을 만들고 있습니다. 이 기능은 클릭된 항목을 가져오고 해당 값selected을 true로 업데이트합니다.

  const onRadioBtnClick = (item) => {
    let updatedState = isLiked.map((isLikedItem) =>
      isLikedItem.id === item.id
        ? { ...isLikedItem, selected: true }
        : { ...isLikedItem, selected: false }
    );
    setIsLiked(updatedState);
  };

이 함수를 다음과 같이 둘 다onPress의 TouchableOpacity에 전달합니다.

<TouchableOpacity onPress={() => onRadioBtnClick(item)}>

이제 여기서 selected prop을 기반으로 조건부 렌더링을 수행해야 합니다. 라디오 버튼 구성 요소에 전달하여 선택 여부에 따라 모양을 제공하는 라디오 버튼의 내부<View />를 숨기고 표시합니다.

 {item.selected ? <View style={styles.radioButtonIcon} /> : null}

리팩토링 및 재사용 가능한 구성 요소 만들기

여기에서 모든 기능이 완료되었습니다. 이제 라디오 버튼의 별도 구성 요소를 만들고 다음과 같은 필수 소품을 전달합니다.

const RadioButton = ({ onPress, selected, children }) => {
  return (
    <View style={styles.radioButtonContainer}>
      <TouchableOpacity onPress={onPress} style={styles.radioButton}>
        {selected ? <View style={styles.radioButtonIcon} /> : null}
      </TouchableOpacity>
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.radioButtonText}>{children}</Text>
      </TouchableOpacity>
    </View>
  );
};

이렇게 루프 내부에 RadioButton 구성 요소를 작성하면 완료됩니다 🎉 🎉

  {isLiked.map((item) => (
     <RadioButton
       onPress={() => onRadioBtnClick(item)}
       selected={item.selected}
       key={item.id}
     >
       {item.name}
     </RadioButton>
  ))}

이제 여러 구성 요소에서 여러 번 재사용할 수 있습니다 🎊
아래 코드와 기능을 확인할 수 있습니다.