리액트 네이티브 Progress Circles 표시하기 (react-native-progress-circle)

미세먼지 농도를 표시할려는 앱을 현재 구상중인데 아래와 같은 원형차트와 비슷한느낌을 내는 라이브러리를 찾아서 소개하고자 한다.

차트 모양이 완전히 똑같진 않지만 진행상태를 원형 상태바를 유지하고 있다. 

리액트네이티브 프로젝트를 생성하고 npm 명령어를 이용하여 라이브러리를 설치한다.

npm install --save react-native-progress-circle

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import ProgressCircle from 'react-native-progress-circle'
 
export default class App extends Component {
    render() {
      return (
        <View style={{ justifyContent : 'center',  height : 60,  alignItems : 'center', flexDirection: 'column', flex : 1 }} >
            <ProgressCircle
                percent={30}
                radius={100}
                borderWidth={30}
                color="#06BF35"
                shadowColor="#CDF2D7"
                bgColor="#fff">
                <Text style={{ fontSize: 30 , fontWeight : 'bold' }}>{'30'}</Text>
            </ProgressCircle>
          </View>
      )
  }
}

[App.js]

프로젝트를 실행하면 아래와 같이 Progress Cirlce 원이 실행된다.

주요속성으로는 아래와 같은속성이 있다.

percent : 진행상태를 나타낼 퍼센트 값을 입력한다. Number Type 

radius :  Circle에 크기를 나타낸다.

[radius 값이 50일때 원크기]

[radius 값이 100일때의 원크기]

borderWidth :  Circle 에 두깨를 나타낸다. 값이 클수록 두꺼워진다. 

color : border color

shadowColor : border에 백그라운드 컬러 (바로 위에 스샷은 회색이다.)

bgColor : 원안쪽에 컬러이다. (바로 위에 스샷에 30%글자 영역이 bgColor 영역이다.)

참고 

https://cmichel.io/react-native-progress-circle

https://github.com/MrToph/react-native-progress-circle#readme