[React-Native] Circular Progress Bar/ 원형 상태바 추가하는 법

 

RN에서 원형 프로그레스바를 그리는 방법은 다양하게 있다.

지금까지 개발하면서 느낀 점은 RN은 모듈화가 굉장히 잘 되어 있는 편이라서 원하는 모듈을 다운 받아서 설치하기만 하면 되기 때문에 개발이 간편하다고 생각이 든다. (익숙해진다면)

위와 같은 원형 바를 사용하기 위해서 선택한 모듈은 이것이다.

react-native-circular-progress 모듈을 사용하기 위해서 설치부터 시작해 보겠다.

yarn add react-native-circular-progress react-native-svg
react-native link react-native-circular-progress react-native-svg 

react-native-circular-progress 만 설치하게 된다면 오류가 나게 된다...

꼭 react-native-svg를 함께 설치하도록 하자.

 

사용 방법도 꽤나 간단하다.

import { AnimatedCircularProgress } from 'react-native-circular-progress'

위와 같이 AnimatedCircularProgress를 import 하고, render() 안에서 삽입하길 원하는 부분에 쓰기만 하면 된다.

            <AnimatedCircularProgress
              size={290}
              width={6}
              backgroundWidth={6}
              fill={fill}
              tintColor="#00d4e7"
              backgroundColor="#3d5875"
              arcSweepAngle={260}
              rotation={225}>
              {
                (fill) => (
                  <Text style={{
                    fontSize: 50,
                    textAlignVertical: "center",
                    textAlign: "center",
                    color:"white",
                    marginTop: -30}}> {this.state.points}
                  </Text>
                )
              }
            </AnimatedCircularProgress>

옵션들이 여러가지 있는데 나는 아치형 모양을 사용하고 싶어서 arcSweepAngle을 260으로,

rotation 225로 시작 각도를 설정해 주었다. 

state 에다가 points를 만들었고 이것으로 원형 프로그래스바의 값을 표시해 주었다.

만약 상황에 따라 값을 바꾸게 된다면 this.setState({points: <원하는값>}); 을 하게 되면 바뀔 것이다.