[스터디 부록] React-Native 그라데이션

React-Native 그라데이션 넣고 Expo에서 확인하기

React Native에서 그라데이션 색상을 넣으려면 linear-gradient를 제공하는
라이브러리를 이용해야 한다고 한다.

공식 사이트에서는

yarn add react-native-linear-gradient

혹은

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

위 코드로 라이브러리를 설치하고...

react-native link react-native-linear-gradient

이 코드로 react-native와 해당 라이브러리를 연결해 주면 된다고 한다!
(react-native 버전 0.60 이상에서는 이 과정은 자동으로 된다고 한다!)

=> react-native 버전은 프로젝트 내 package.json 파일에서 확인 가능!!

이 연결 과정이 끝나고

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

이렇게 import를 해주면 된다는데...

Expo에서 렌더링이 되지 않는 오류가 발생했다..ㅠ

해결 방법을 찾다가.. Expo 문서에서 발견!!

npm install expo-linear-gradient

해당 명령어로 다시 라이브러리를 설치해 주고..

import React from 'react';
import { LinearGradient } from 'expo-linear-gradient'
import { StyleSheet,  Text} from 'react-native';



export default function TestPage() {
    return (
        <LinearGradient style={styles.container} colors={['#5f0d80', '#7c22a1', '#c487de']}>
            <Text style={styles.test_text}>[내용]</Text>
        </LinearGradient>
    )
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: '#15106b',
        flex: 1,
        justifyContent:"center",
        alignItems:"center",
    },
    test_text: {
        color:'#fff',
        fontSize:20,
        fontWeight:'700'
    },
})

expo-linear-gradient 라이브러리에서 {LinearGradient}를 불러오니
정상적으로 렌더링되었다!!