React Native 날씨앱(2). 로딩화면 만들기, LinearGradient

Create Loading Screen

제일 기본인 로딩 스크린을 만들었다. 강의에서는 다른 배경화면과 글씨를 썼지만 내 취향에 맞게 바꿔 보았다.

내가 만든 로딩 화면이다.
밋밋한 배경이 싫어서 그러데이션을 넣어 보았다.

그라데이션을 사용하려면 모듈을 다운로드하여 적용하면 된다.

늘 그랬듯이 expo install로 간단하게 진행할 수 있다.
아래의 명령어를 터미널에 입력하면 된다.

expo install expo-linear-gradient

모듈 설치를 완료한 뒤, 모듈을 import 하면 된다.

다음은 Loading Screen 코드이다.

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

export default function Loading() {
  return (
    <LinearGradient  // Background Linear Gradient
        colors={['#C9D6FF', '#E2E2E2']}
        style={styles.gradient}
        >
        <Text style={styles.text}>Loading...</Text>
    </LinearGradient>
  );
}

const styles = StyleSheet.create({
  gradient: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'flex-end',
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    
  },
  text: {
    marginLeft: 50,
    marginBottom: 140,
    fontSize: 40,
    fontWeight: "200",
  }
});

LinearGradient를 import 한 뒤, View를 사용하듯 하면 된다.
color라는 props에 배열로 원하는 색을 지정하고, style로 시작 위치를 정하면 간단하게 적용 가능하다.