[React Native] 단일 선택 버튼 만들기(Single Select Button)

이어서 위쪽에 언어 선택 카테고리를 만들어 볼 건데, 직접 만들어도 되지만, 컴포넌트 소스 코드가 있길래 그냥 사용했다

 

https://github.com/zengkm/react-native-select-button

GitHub - zengkm/react-native-select-button: A react native buttton component for single selection and multi selection

 

그런데 내가 만들어야 하는 카테고리의 경우, 맨 처음 들어가면 '전체' 버튼이 선택된 상태여야 해서 소스코드를 조금 수정해 주었다

constructor(props) {
    super(props);
    const set = Array(this.props.count).fill(false)
    if (this.props.initialSelect != null)
        set[this.props.initialSelect] = true
    this.state = {
        select: set,
    }
}

위 코드에서 constructor 부분을 위와 같이 수정해, initialSelect props을 이용해 default로 선택되어 있는 버튼이 존재할 수 있도록 해 주었다

 

<View>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false}>
        <SingleSelectButton
            count={7}
            textArray={['전체', '영어', '한국어', '중국어', '일본어', '스페인어', '불어']}
            initialSelect={0}
            getSelected={setLanguage}
            selectedButtonColor="#000000"
            selectedTextColor="#ffffff"
            containerStyle={{ flexDirection: 'row', paddingVertical: 15, paddingHorizontal: 10, backgroundColor: '#EBEDF6' }}
            buttonStyle={{ width: 66, height: 37, ...boardStyle.SelectButton }}
            textStyle={boardStyle.SelectText}
        />
    </ScrollView>
</View>

count에 전체 버튼 개수를 넣고, textArray에 각각 들어갈 카테고리명을 넣고, 위에서 수정하며 추가한 initialSelect에 0을 지정한다

getSelected는 선택된 버튼 데이터 저장하는 함수를 넣으면 된다