[weather_app_3] weather view

날씨를 표시하는 뷰를 만들자!

weather.js 파일 생성

import React, { Component } from "react";

import { StyleSheet, Text, View } from "react-native";

import { LinearGradient } from "expo"; //view인데 배경색이 gradient인것

export default class Weather extends Component {

render() {

return (

<LinearGradient

colors={["#00C6FB", "#005BEA"]} //from-to 색상 지정

style={styles.container} //스타일

/>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1

}

});

LinearGradient 스펠링 잘못써서 계속 오류났었다..ㅠㅠ

App.js에 Weather컴포넌트를 import해준다.

import Weather from "./Weather";

wheather view를 보며 작성해야하기 때문에 isLoaded를 true로 바꾸고 null을 weather 컴포넌트로

export default class App extends Component {

state = {

isLoaded: true

}

render() {

const { isLoaded } = this.state;

return (

<View style={styles.container}>

{isLoaded ? <Weather /> : (

<View style={styles.loading}>

<Text style={styles.LoadingText}>Getting the weather</Text>

</View>

)}

</View>

);

}

}

컨테이너 만들기

1.아이콘,텍스트가 포함된 윗쪽 컨테이너

2.텍스트가 표시될 아랫쪽 컨테이너

import React, { Component } from "react";

import { StyleSheet, Text, View } from "react-native";

import { LinearGradient } from "expo"; //view인데 배경색이 gradient인것

export default class Weather extends Component {

render() {

return (

<LinearGradient

colors={["#00C6FB", "#005BEA"]} //from-to 색상 지정

style={styles.container} //스타일

>

<View style={styles.upper}>

<Text>Icon here</Text>

<Text style={styles.temp}>25˚</Text>

</View>

<View style={styles.lower}>

<Text style={styles.title}>Rainning</Text>

<Text style={styles.subtitle}>For more info look outside</Text>

</View>

</LinearGradient>

);

}

}

const styles = StyleSheet.create({

container: {

flex: 1

},

upper: {

flex: 1,

alignItems: "center",

justifyContent: "center"

},

temp: {

fontSize: 38,

backgroundColor: "transparent",

color: "white",

marginTop: 10

},

lower: {

flex: 1,

alignItems: "flex-start",

justifyContent: "flex-end",

paddingLeft: 25

},

title: {

fontSize: 38,

backgroundColor: "transparent",

color: "white",

marginBottom: 10,

fontWeight: "300"

},

subtitle: {

fontSize: 24,

backgroundColor: "transparent",

color: "white",

marginBottom: 24

}

});