[RN] react-native Gradient -그라데이션

그라데이션 디자인

반응형

 

 

🐰: 개발하고 있는 앱에서 디자이너님이 위와 같은 디자인을 요청주셨다.

사용자의 데이터를 백분율로 표현해서 게이지를 나타내는 부분인데

저렇게 그라데이션으로 표현해달라고 하셨다. RN이 처음인 나는 디자인을 보자마자

겁부터 먹었는데 생각보다 정말 단순했다 !

역시 겁부터 먹으면 안된다 !

 

---

 

설치

react-native-linear-gradient라이브러리가 설치되어 있는지 확인 후 라이브러리를 설치해준다.

npm install --save react-native-linear-gradient

 

연결

import LinearGradient from 'react-native-linear-gradient';

 

사용방법

  <>
    <LinearGradient id="grad" x1="1" y1="0" x2="0%" y2="90%">
      <Stop offset="0" stopColor={item.color} />
      <Stop offset="80%" stopColor="#ffCD00" />
    </LinearGradient>
    <Circle cx={center.x} cy={center.y} r="10" fill={item.totalpointper >=25 ? '#ffCD00' : item.color} />
  </>

* 나의 코드에서 Circle은 Linear의 끝 부분이 동그랗게 만들어 주기 위해 따로 만든 컴포넌트이다. *

 

참고

• react-native-linear-gradient 공식 사이트: https://github.com/react-native-community/react-native-linear-gradient
• 그라데이션 애니메이션 예제: AnimatedGradient

rn-animated-gradient-example/src/ColorExample/AnimatedGradient at master · dslounge/rn-animated-gradient-example

 

 

GitHub - react-native-linear-gradient/react-native-linear-gradient: A <LinearGradient /> component for react-native