[React Native -16] 라디오 버튼 구현하기

React Native Directory에 다양한 라디오버튼 라이브러리들이 나와있지만, 라이브러리를 사용하지 않고 직접 구현해보겠다

 

💡 배송방법 선택하기 ( 자가배송 or 웨얼파츠배송) 
1. 버튼 안에 빈 체크박스 아이콘을 추가
2. 클릭 했을 경우 ( focus를 감지해서 아이콘 변경, state값 바꾸기)

class RadioButton extends Component {
    constructor(props){
        super(props);

        this.state={
            deliveryMethod:'',
            s_focused:false,
            w_focused:false,
        }
    }
    ...

* focused가 true이면 체크된 아이콘 표시, false이면 빈 아이콘

 

<TouchableOpacity onPress={this.selfDel}>
    <RadioIcon name={this.state.s_focused?"check-box":"check-box-outline-blank"} size={30} color={"#295C9E"}> 
    <Text> 자가배송</Text></RadioIcon>
</TouchableOpacity>

<TouchableOpacity onPress={this.wherePartsDel}>
    <RadioIcon name={this.state.w_focused?"check-box":"check-box-outline-blank"} size={30} color={"#295C9E"}>
    <Text>웨얼파츠</Text></RadioIcon>
</TouchableOpacity>

 

자가 배송 버튼을 클릭했을 때 s_focused를 true로 변경, deliveryMethod 변수 setState하기

 //자가배송 버튼 눌렀을 경우
selfDel=()=>{
    this.setState({s_focused:true, w_focused:false,deliveryMethod:'자가배송'});
}
//웨얼파츠 버튼 눌렀을 경우
wherePartsDel=()=>{
    this.setState({w_focused:true,s_focused:false,deliveryMethod:'웨얼파츠'});
}

 

 

결과물