React-native 그라데이션 배경화면 [UI]

 

 

 리액트 플젝에서 그라데이션이 들어간 버튼 제작을 하려고했으나...

하단의 안드로이드에서만 발생하는 오류 때문에 넘어가고,

 ** 해결법 없음 주의ㅣㅣㅣ

어떻게 해도 안되는 그라데이션.. 너란 아이 ㅠㅠ

 

*** 해결법 찾음!!!

소스 : https://github.com/react-native-linear-gradient/react-native-linear-gradient

1. 안드로이드 에뮬레이터 종료, node도 종료

2. 해당 프로젝트에 아래코드로 라이브러리 다운로드

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

3. 리액트 네이티브 .60 이상의 버전을 사용하고,

아래의 코드로 라이브러리를 나의 프로젝트와 연결

react-native link react-native-linear-gradient

4. 프로젝트 시작 후,

그라디언트를 쓸 파일 상단에 아래 코드 import

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

 

ex)

<LinearGradient start={{x: 0, y: 0}} end={{x: 1, y: 0}} colors={["#b59039", "#eea74c", "#ffea94", "#dec521"]} />

 

 

+++ 다음에 쓸 수도 있을 거 같은 그라데이션을 넣을 수 있는 view도 찾아

저장해둔다ㅏㅏㅏ

 

출처 : https://github.com/soffes/GradientView

GitHub - soffes/GradientView: Easily use gradients in UIKit for iOS & tvOS

 

문제의 그라데이션 속성 라이브러리 : https://github.com/react-native-linear-gradient/react-native-linear-gradient

GitHub - react-native-linear-gradient/react-native-linear-gradient: A component for react-native

 

그리고, 나와 같은 문제를 겪는 사람들... ㅎ

https://github.com/react-native-linear-gradient/react-native-linear-gradient/issues/503

requireNativeComponent: "BVLinearGradient" was not found in the UIManager. · Issue #503 · react-native-linear-gradient/react-n

----> 여기선 expo로 라이브러리를 설치하면 정상작동 된다고 나와있지만..

내 프로젝트는 expo 사용을 하고있지 않기때문에 패스..! ㅠ