[react-native] 퍼센트 진행률 모듈 (react-native-percentage-circle)

프로젝트를 진행하다 보면, 데이터의 진행도를 수치화해서 보여줄 때가 있다. 

RN 모듈 중, 해당 모듈이 데이터의 진행도를 쉽게 나타낼 수 있어서 찾아왔다.

 

https://github.com/JackPu/react-native-percentage-circle#readme

GitHub - JackPu/react-native-percentage-circle: 🐳 React Native Percentage Circle

사용법도 간편하다 .

npm i react-native-percentage-circle --save

해당 npm 명령어로 라이브러리를 설치해 준 후, <percentageCircle> 태그를 사용해주기만 하면 끝이다.

git 페이지에 있는 예제를 보자.

 

 

import PercentageCircle from 'react-native-percentage-circle';
 
//...
 
render() {//1번
  <View>
    <PercentageCircle radius={35} percent={50} color={"#3498db"}></PercentageCircle>  
  </View>
//2번   <View>
    <PercentageCircle radius={35} percent={50} color={"#3498db"}>
      <Image style={{width:20,height:20}} source={{require('your image')}} />
    </PercentageCircle>  
  </View>
}

상단에 설치한 라이브러리를 import 시켜준 후에, PercentageCircle  태그를 사용한 예제이다.

 

1번,2번 각각 두개의 간단한 예제로 이루어져 있다.

PercentageCircle 태그 속성 중, percent 태그 안에 사용할 변수 값을 넣어줘서 사용할 수 있을 것 같다.

예를 들어서 구현해본다면 다음과 같다,

 

import PercentageCircle from 'react-native-percentage-circle';
 
...
const [data,setData] = useState(obj.params.data);
...
...
...
 
render() {
   {({
        let success_percent = data.percent;return(   <View>
   <PercentageCircle radius={35} percent={success_percent} color={"#3498db"}>
          <Text>{data.percent}%</Text>
    </PercentageCircle>  
  </View>
)
   })()}
 
}




     (adsbygoogle = window.adsbygoogle || []).push({});