React_Native (2)

😀 위치를 가져오고, 위치의 위도, 경도에 따른 섭씨를 가져오는 작업.

🔴 위도, 경도에 따른 섭씨온도 get

💻App.js

  export default class extends React.Component {
    state = {
      isLoading: true
    };
    getWeather = async (latitude, longitude) => {
      const { data:{main :{temp},
      weather
    	} } = await axios.get(
        `http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&APPID=${API_KEY}&units=metric`
      );
      this.setState({ isLoading: false,condition:weather[0].main, temp });
    };
    getLocation = async () => {
      try {
        ...
    }
  componentDidMount(){
    this.getLocation();
  }
  render(){
    const {isLoading,condition, temp } = this.state;
    return isLoading? <Loading /> : <Weather temp={temp}/>;
  }
}

😀 코드 설명

1. this.setState({ isLoading: false,condition:weather[0].main, temp })에서 data.main.temp에 섭씨 온도가 담겨져 있음. axios의 홈페이지로 들어가보면 확인 가능. es6 문법으로 축약 가능.
2. const { data:{main :{temp},weather 의 es6 문법 사용.
3. isLoading에 따라 Loading 중이면 Loading 페이지, 그렇지 않으면 Weather 페이지.
4. Weather 페이지에 props로 temp = {temp}를 넘겨준다.

💻 Weather.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import PropTypes from "prop-types";

export default function Weather({ temp }) {
  return (
    <View style={styles.container}>
      <Text>{temp}</Text>
    </View>
  );
}

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

😀 코드 설명

1. propTypes로 temp의 형식 맞춰줌.
2. condition은 해당 배열에 포함되어 있어야 한다는 의미.

🔴 아이콘 및 온도 표시하기

💻 Weather.js

import React from "react";
import { View, Text, StyleSheet } from "react-native";
import PropTypes from "prop-types";
import { MaterialCommunityIcons } from "@expo/vector-icons";

export default function Weather({ temp }) {
  return (
    <View style={styles.container}>
      <View style = {styles.halfContainer}>
        <MaterialCommunityIcons size={96} name="weather-lightning-rainy" />
        <Text style ={styles.temp}>{temp}º</Text>
        </View>
        <View style = {styles.halfContainer}/>
    </View>
  );
}

Weather.propTypes = {
  ...
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  temp: {
    fontSize: 42
  },
  halfContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

😀 코드 설명

1. import { MaterialCommunityIcons } from "@expo/vector-icons"; : expo의 icon API에서 가져온 icon 모음.
2. view를 반으로 쪼개줌.
3. <MaterialCommunityIcons size={96} name="weather-lightning-rainy" /> : icon의 name을 통해서 가져옴.

🔴 background gradient color

terminal : expo install expo-linear-gradient

💻 Weather.js

import React from "react";
import { View, Text, StyleSheet, StatusBar } 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 in the house",
    subtitle: "Actually, outside of the house"
  },
  Drizzle: {
    iconName: "weather-hail",
    gradient: ["#89F7FE", "#66A6FF"],
    title: "Drizzle",
    subtitle: "Is like rain, but gay 🏳️‍🌈"
  },
  ...
};

export default function Weather({ temp, condition }) {
  return (
    <LinearGradient
      colors={weatherOptions[condition].gradient}
      style={styles.container}
    >
      <StatusBar barStyle="light-content" />
      <View style={styles.halfContainer}>
        <MaterialCommunityIcons
          size={96}
          name={weatherOptions[condition].iconName}
          color="white"
        />
        <Text style={styles.temp}>{temp}°</Text>
      </View>
      <View style={styles.textContainer}>
        <Text style={styles.title}>{weatherOptions[condition].title}</Text>
        <Text style={styles.subtitle}>
          {weatherOptions[condition].subtitle}
        </Text>
      </View>
    </LinearGradient>
  );
}

Weather.propTypes = {
  ...
};

const styles = StyleSheet.create({
  ...
  title: {
    color: "white",
    fontSize: 44,
    fontWeight: "300",
    marginBottom: 10,
    textAlign: "left"
  },
  subtitle: {
    fontWeight: "600",
    color: "white",
    fontSize: 24,
    textAlign: "left"
  },
  textContainer: {
    alignItems: "flex-start",
    paddingHorizontal: 40,
    justifyContent: "center",
    flex: 1
  }
});

<출처 : 노마드 코더>