728x90
프로젝트를 진행하다 보면, 데이터의 진행도를 수치화해서 보여줄 때가 있다.
RN 모듈 중, 해당 모듈이 데이터의 진행도를 쉽게 나타낼 수 있어서 찾아왔다.
https://github.com/JackPu/react-native-percentage-circle#readme
사용법도 간편하다 .
npm i react-native-percentage-circle --save
해당 npm 명령어로 라이브러리를 설치해 준 후, <percentageCircle> 태그를 사용해주기만 하면 끝이다.
git 페이지에 있는 예제를 보자.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
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>
}
|
cs |
상단에 설치한 라이브러리를 import 시켜준 후에, PercentageCircle 태그를 사용한 예제이다.
1번,2번 각각 두개의 간단한 예제로 이루어져 있다.
PercentageCircle 태그 속성 중, percent 태그 안에 사용할 변수 값을 넣어줘서 사용할 수 있을 것 같다.
예를 들어서 구현해본다면 다음과 같다,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
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>
) })()}
}
|
cs |
useState 값을 가져와서, 이런 식으로 데이터를 세팅해주면 된다.
728x90