LinearGradient

기존에 구현 중이던 야추 다이스 프로젝트를 삭제했다.

이유는 좀 더 대중적인 웹, 앱스럽게 통용되는 프로젝트를 만드는게 이 후 방향성에 도움이 될 것 같아서였다.

대신 리액트 네이티브는 꾸준히 학습할 예정이여서 백엔드 포함 간단한 TodoList를 만들 예정이다.

 

LinearGradient

LinearGradient는 expo에서 사용할 수 있는 그라데이션 지정 모듈이다.

npx expo install expo-linear-gradient

해당 명령어로 모듈을 설치해서 사용하며, <LinearGradient> 태그로 바로 쓸 수있다.

 

import { LinearGradient } from "expo-linear-gradient";
import { View } from "react-native";

const BoxBg = ({ children }: { children: React.ReactNode }) => {
  return (
    <LinearGradient
      colors={["#F9D3C5", "#FBDAAC", "#F4FFC5"]}
      start={{ x: 0, y: 0 }}
      end={{ x: 1, y: 1 }}
      className="flex flex-col w-full h-full rounded-lg shadow-md p-4"
    >
      <View className="flex-1 overflow-auto">{children}</View>
    </LinearGradient>
  );
};
export default BoxBg;

박스의 배경색을 컴포넌트로 작성한 코드이다.

 

LinearGradient는 View와 같이 하나의 태그처럼 사용하면 되고, 속성엔 colors, start, end가 반드시 들어가야 한다.

colors는 그라데이션을 적용할 색상들을 넣으며, rgb, hex코드, 텍스트 등 뭘 넣어도 상관 없다.

start는 첫 그라데이션의 시작점이고 end는 끝점을 지정할 수 있다.

방향	start	end	설명
왼쪽 → 오른쪽	{ x: 0, y: 0 }	{ x: 1, y: 0 }	수평 그라디언트
오른쪽 → 왼쪽	{ x: 1, y: 0 }	{ x: 0, y: 0 }	수평 반대 방향
위쪽 → 아래쪽	{ x: 0, y: 0 }	{ x: 0, y: 1 }	수직 그라디언트
아래쪽 → 위쪽	{ x: 0, y: 1 }	{ x: 0, y: 0 }	수직 반대 방향
좌상단 → 우하단	{ x: 0, y: 0 }	{ x: 1, y: 1 }	대각선 ↘ 방향
우상단 → 좌하단	{ x: 1, y: 0 }	{ x: 0, y: 1 }	대각선 ↙ 방향
좌하단 → 우상단	{ x: 0, y: 1 }	{ x: 1, y: 0 }	대각선 ↗ 방향
우하단 → 좌상단	{ x: 1, y: 1 }	{ x: 0, y: 0 }	대각선 ↖ 방향

 

[결과]

지정한 세 가지 색상으로 그라데이션이 적용된 걸 볼 수 있다.