[React-Native] 그라데이션 효과, 배경이미지 넣기

1. 그라데이션이란?

그라데이션이란 어떤 색조, 명암, 질감을 단계적으로 다른 색조, 명암, 질감으로 바꾸는 예술 기법을 의미한다

2. 그라데이션 구현하기

react native에서 그라데이션을 구현하는 방법에는 여러 방법이 있지만 expo프로젝트를 진행중인 만큼 expo에서 사용할 수 있는 방법에 대해 설명할것이다.
expo를 사용중이면 그라데이션 효과를 넣는게 매우 간단한데, 바로 expo-linear-gradient의 LinearGradient component를 사용하면 된다.

npx expo install expo-linear-gradient

먼저 expo-linear-gradient 모듈을 받아온 뒤, LinearGradient를 import해주면 된다.

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

    <LinearGradient colors={["#4e0429", "#ddb52f"]} style={styles.rootScreen}>
      <StartGameScreen />
    </LinearGradient>

해당 컴포넌트는 특별한 property를 가진다.

• colors: 그라데이션에 사용할 색상을 배열로 넣어줘야 하며, 최소 2가지 이상의 색상을 입력값으로 주어야 한다.
• locations: 숫자 배열의 형태를 입력값으로 받으며, 그라데이션 효과를 줄 범위를 지정한다
  예를들어 [ 0.5, 0.8 ]의 배열을 주게되면 첫번째 색상은 50%지점까지 나오고 50~80%구간이 그라데이션 효과를 받으며 80~100%지점이 두번째 색상이 나온다.
  지정하지 않으면 그라데이션이 전체에 고르게 분포된다.

더 자세한 property들은 공식 문서를 참고하자 https://docs.expo.dev/versions/latest/sdk/linear-gradient/#end

3. 배경이미지 추가하기

react native에서는 배경 이미지를 추가할 때 내장 컴포넌트인 ImageBackground component를 사용하면 된다.
사용법도 매우 간단한데,

    <LinearGradient colors={["#4e0429", "#ddb52f"]} style={styles.rootScreen}>
      <ImageBackground
        style={styles.rootScreen}
        imageStyle={styles.backgroundImage}
        source={require("./assets/images/background.png")}
      >
        <StartGameScreen />
      </ImageBackground>
    </LinearGradient>

이전에 이미지를 넣을때와 동일하게 이미지의 경로를 받아올때는 require함수를 통해 현재 파일 기준 상대경로를 작성해야한다.
ImageBackground 컴포넌트는 Image Props를 상속받고 있다.
위 코드를 보면 imageStyle이라는 property가 보이는데, 해당 property를 통해서도 style을 지정할 수 있다.
더 자세한 사항은 공식문서를 참고하자 https://reactnative.dev/docs/imagebackground