[React Native] Radio Button 사용하기

radio button 사용하기

이거 사용함

구글에 radio button이라고 치면 다양한 라이브러리들이 나오는데 나는 그 중에서 가장 위에 뜨는 react-native-paper라는 것을 사용했다.

1. 설치

먼저 react-native-paper를 설치한다.

npm install react-native-paper

2. useState

const [checked, setChecked] = useState('first');

first는 나중에 변경할 예정이다.

3. 예시 코드

import * as React from 'react';
import { View } from 'react-native';
import { RadioButton } from 'react-native-paper';

const MyComponent = () => {
  const [checked, setChecked] = React.useState('first');

  return (
    <View>
      <RadioButton
        value="first"
        status={ checked === 'first' ? 'checked' : 'unchecked' }
        onPress={() => setChecked('first')}
      />
      <RadioButton
        value="second"
        status={ checked === 'second' ? 'checked' : 'unchecked' }
        onPress={() => setChecked('second')}
      />
    </View>
  );
};

export default MyComponent;

예시에서는 props, status, onPress props만 사용했지만 추가로 color 같은 것도 있으니 페이지를 잘 읽어보고 사용하자