React Native 날씨앱(6). 날씨 표시 화면 구현

Create Weather Screen

필요한 정보들은 모두 props로 전달받은 component를 구현하기만 하면 프로젝트는 완성이다. 
함수형 component를 사용할 것이고 prop-types 모듈을 사용하여 편하게 props를 관리할 것이다.

다음은 Screen.js 코드이다.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import propTypes from 'prop-types';
import { LinearGradient } from 'expo-linear-gradient';
import { MaterialCommunityIcons } from '@expo/vector-icons';

const weatherOptions = {
    Thunderstorm: {
        iconName: "weather-lightning",
        gradient: ["#373B44", "#4286f4"],
        title: "Thunderstorm",
        subtitle: "Watch out!!"
    },
    Drizzle: {
        iconName: "weather-hail",
        gradient: ["#89F7FE", "#66A6FF"],
        title: "Drizzle",
        subtitle: "Gray day..." 
    },
    Rain: {
        iconName: "weather-rainy",
        gradient: ["#00C6FB", "#005BEA"],
        title: "Rain",
        subtitle: "Just don't go outside."
    },
    Snow: {
        iconName: "weather-snowy",
        gradient: ["#7DE2FC", "#B9B6E5"],
        title: "Snow",
        subtitle: "Let it go~."
    },
    Atmosphere: {
        iconName: "weather-hail",
        gradient: ["#89F7FE", "#66A6FF"],
        title: "Atmosphere",
        subtitle: "So So."
    },
    Clear: {
        iconName: "weather-sunny",
        gradient: ["#FF7300", "#FEF253"],
        title: "Clear",
        subtitle: "Sunny day :)."
    },
    Clouds: {
        iconName: "",
        gradient: ["#bdc3c7", "#2c3e50"],
        title: "Clouds",
        subtitle: "Don't laundry."
    },
    Mist: {
        iconName: "weather-hail",
        gradient: ["#616161", "#9bc5c3"],
        title: "Mist",
        subtitle: "I don't like Mist."
    },
    Dust: {
        iconName: "weather-hail",
        gradient: ["#BA8B02", "#181818"],
        title: "Dust",
        subtitle: "Must take a mask."
    },
      Haze: {
        iconName: "weather-hail",
        gradient: ["#4DA0B0", "#D39D38"],
        title: "Haze",
        subtitle: "Couldn't show front."
      }
  };
  

export default function Screen({temp,condition}){
    return(
        <LinearGradient  // Background Linear Gradient
            colors={weatherOptions.[condition].gradient}
            style={styles.container}
        >
            <View style={styles.iconView}>
                <MaterialCommunityIcons name={weatherOptions[condition].iconName} size={93} color="white" />
                <Text style={{marginTop:10, fontSize: 40, fontWeight:"200",color:'white'}}>{temp}</Text>
            </View>
            <View style={styles.Text}>
                <Text style={styles.title}>{weatherOptions[condition].title}</Text>
                <Text style={styles.subtitle}>
                {weatherOptions[condition].subtitle}
                </Text>
            </View>
        </LinearGradient>
    );
}

Screen.propTypes = {
    temp: propTypes.number.isRequired,
    condition: propTypes.oneOf(
        ["Thunderstorm",
        "Drizzle",
        "Rain",
        "Snow",
        "Atmosphere",
        "Clear",
        "Clouds",
        "Haze",
        "Mist",
        "Dust"]).isRequired,
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
  },
  iconView: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 30,
  },
  Text: {
    flex: 1,
    alignItems: 'flex-start',
    justifyContent: 'center',
  },
  title: {
    fontSize: 50,
    textAlign:'left',
    marginLeft: 50,
    color: 'white'
  },
  subtitle: {
    fontSize: 30,
    textAlign:'left',
    marginLeft: 50,
    marginBottom: 100,
    color: 'white'
  }
});

코드가 길지면 style과 conditionOption 때문에 그런 것 이기 때문에 겁먹지 않아도 된다.
크게 상단에 Icon과 온도를 render하는render 하는 View와 하단에 title과 subtitle을 render 하는 View로 나뉜다. 
상단에는 center 정렬을 하고 싶었고, 하단에는 왼쪽에서 부터 쓰이기를 원했다.
( 이 부분은 자신의 입맛에 맞게 style을 변경해도 아무런 문제가 없다. )

원하는 style을 만들어 테스트용으로 <Text>를 이용하여 style이 맞게 적용됐나 확인했다. 
문제없이 잘 만들어졌다. 

이제는 props로 전달받은 데이터만 올바른 위치에 넣어 주기만 하면 된다. 
Screen.propsTypes를 이용하여 props의 타입을 관리하였다. 

weatherOption이라는 객체를 하나 정의해, 전달받은 props의 condition에 따라 원하는 값들을 다르게 적용시킬 수 있는 객체를 넣었다. 

 

이제 Screen을 render할때 props를 참고하여 weatherOption에서 해당하는 값들을 읽어와 component를 render시킬
것이다.

다음은 출력 화면이다.