[React-Native] 그라데이션 적용

그라데이션을 적용할 수 있는 라이브러리 react-native-linear-gradient를 사용해보자.

Installation

Using Yarn

yarn add react-native-linear-gradient

Using npm

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

Linking

만약 react-native version이 0.60 아래라면 Linking 필요!

react-native link react-native-linear-gradient

후에는 https://github.com/react-native-linear-gradient/react-native-linear-gradient 에 들어가 메뉴얼을 확인해보자.

설치가 다 되었다면 사용해보자.

	const linearColors = [startBgColor, endBgColor];
    
        return <LinearGradient
                  colors={linearColors}
                  style={{
                    width: '100%',
                    height: '100%',
                    position: 'absolute',
                    zIndex: 100,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}/>

startBgColor와 endBgColor에 RGBA 색상이나 Hex 값만 정해주면 된다!
ex) ['#FFFFFF', '#0D0D0D']

 

이렇게 지정해주면 배경색이 그라데이션으로 적용된 것을 볼 수 있다.