[react native] Expo API - LinearGradient

LinearGradient라는 Expo에서 제공해주는 API를 오늘 처음 알았다

공홈 설명을 읽어보니 선형으로 색상을 여러가지 색깔을 트랜지션 할 수 있다

npx expo install expo-linear-gradient

요렇게 설치를 해준후 아래와 같이 import 시킨다

import { LinearGradient } from 'expo-linear-gradient';

그 후에 쓰고 아래와 같이 사용해주면 된다

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

export default function App() {
  return (
    <View style={styles.container}>
      <LinearGradient
        // Background Linear Gradient
        colors={['rgba(0,0,0,0.8)', 'transparent']}
        style={styles.background}
      />

<LinearGradient/> 안에 colors라는 prop으로 넣어서 적용하면 된다
나도 저렇게 적용했고 다음과 같이 나왔다

위부터 검은색이다가 밑으로 갈수록 투명이 된다
'rgba(0,0,0,0.8)', 'transparent'의 순서를 바꾸면 투명해지다가 아래로 갈수록 검정으로 트랜지션된다

검은색 뿐만 아니라 다른 색을 넣어도 무방하다

LinearGradient의 prop에는 또 어떤 게 있을까하고 공홈을 보았다
세 가지 속성이 있었는데 내가 이해한 두 가지 속성을 정리해보겠다

• end
  기본값은 { x: 0.5, y: 1.0 }인다
  예를 들면 { x: 0.1, y: 0.2 }으로 지정했다면 왼쪽에서부터 10%, 바닥에서부터 20% 그라데이션이 끝난다는 의미라고 한다

• start
  기본값은 { x: 0.5, y: 0.0 }이다
  예를 들면 { x: 0.1, y: 0.2 }으로 지정했다면 그래디언트가 왼쪽에서 10%, 위쪽에서 20% 시작된다는 의미라고 한다