<aside> 💡 오늘의 목표를 세분화하여 계획하고, 각 세션 별 진행상황을 관리하세요

</aside>

목표 수준 1 Roulette 완성시키기

목표 수준 2 animation 적용시키기

목표 수준 3 Roulette UI 완성하기

• [x] React-Native-Svg를 사용해서 UI 비율에 맞게 룰렛 영역 조절하기
• [x] 항목 명을 입력 받아 색에 맞는 범례 지정하기
• [x] 당첨자 추첨방식

2023년 12월 18일 오후 12:56 (GMT+9)

Creating a React Native SVG-Based Donut Pie Chart with Dynamic Features - Reactnative

React Native SVG를 통한 Roulette

해당 라이브러리에서 Svg, G, Circle을 가지고 만들어 볼 예정이다.

우선 원의 반지름과 둘레를 미리 지정해야한다.

strokeDasharray는 원의 둘레의 길이라고 보면된다.

strokeDashoffset은 시작 지점부터 원하는 지점까지의 거리를 지정하는 프로퍼티다.

예를 들어 1:1 비율인 항목이 있다면 각각 원의 반반씩 가져가야 하므로 원의 전체 둘레의 반의 길이로 지정해주면 된다.