일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- react native hooks
- Kotlin
- Graveyard Keeper
- react native hook
- 프로그래머스 Lv0
- React Native
- 리액트 line chart
- 리액트 라인차트
- react 라인차트
- react line chart
- react circle progress bar
- 프로그래머스 LV.0
- javascript interface
- react
- Android
- react circle progress
- 프로그래머스
- 하우스플리퍼
- 안드로이드
- RecyclerView
- ReactNative
- 티스토리챌린지
- 하우스플리퍼인테리어
- 오블완
- 스팀게임추천
- circular progress bar
- 리액트네이티브
- react native jsi
- 리액트네이티브 hooks
- react native lodash
Archives
- Today
- Total
목록react circle progress (1)
숨참고 개발다이브
[React] 리액트 원형 프로그래스 (Circle Progress Bar) 컴포넌트 만들기/예제
이런 식으로 생긴 원형 Progress는 자주 사용되는 디자인 요소 중 하나이다. 이런 프로그래스 컴포넌트를 라이브러리가 아닌, 직접 커스텀할 수 있는 컴포넌트로 생성해 보았다. 게시글에 올라가는 코드는 React 프로젝트이지만, 애니메이션 부분을 React Native에서 제공하는 Animated를 활용하여 Path 컴포넌트에 애니메이션을 적용하면 동일하게 작동된다. 전체 코드의 완성본은 다음과 같다. 반지름과 수치를 조절할 수 있는 range bar를 태그를 활용해 생성하였고, react-color라는 괜찮은 라이브러리가 있어 색상 피커도 추가해보았다. 포스팅에서는 가장 중요한 CircleProgress 컴포넌트에 대해서만 설명하도록 한다. CircleProgress.tsximport { animat..
개발/React & React Native
2024. 11. 4. 15:48