[React] 날씨 앱 만들기

import * as Location from "expo-location"

import React, { useEffect, useState } from "react";

import {View, Text, Dimensions, StyleSheet, ScrollView, ActivityIndicator} from 'react-native';

const { width : SCREEN_WIDTH } = Dimensions.get('window');

const API_KEY = "f80a82d6f4ca6e9ecaeb1386c05dfb87"

export default function App() {

  const [city, setCity] = useState("Loading...")

  const [days, setDays] = useState([]);

  const [ok, setOk] = useState(true);

  const ask = async() => {

    const {granted} = await Location.requestForegroundPermissionsAsync();

    if (!granted) {

      setOk(false);

    }

    const {coords: {latitude, longitude}} = await Location.getCurrentPositionAsync({accuracy: 5});

    const location = await Location.reverseGeocodeAsync(

      {latitude, longitude},

      {useGoogleMaps:false}

      );

      setCity(location[0].city);  

      const response = await fetch(`https://api.openweathermap.org/data/2.5/forecast?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`)

      const json = await response.json();

      setDays(

        json.list.filter((weather) => {

        if (weather.dt_txt.includes("00:00:00")) {

        return weather;

        }

        })

        );

  };

  useEffect(() => {

    ask();

  }, [])

  return (

  <View style={styles.container}>

    <View style={styles.city}>

      <Text style={styles.cityName}>{city}</Text>

    </View>

    <ScrollView

      showsHorizontalScrollIndicator

      pagingEnabled

      indicatorStyle="white"

      horizontal contentContainerStyle={styles.weather}

    >

      {days.length === 0 ? (

      <View style={styles.day}>

        <ActivityIndicator color ="white" size = "large" style = {{marginTop:10}} ></ActivityIndicator>

      </View>

      ) : (

        days.map((day, index) =>

        <View key={index} style={styles.day}>

          <Text style={styles.temp}>{parseFloat(day.main.temp).toFixed(1)}</Text>

          <Text style={styles.description}>{day.weather[0].main}</Text>

          <Text style={styles.tinyText}>{day.weather[0].description}</Text>

        </View>

        )

      )}

      </ScrollView>

    </View>

  );

}

const styles = StyleSheet.create({

  container:{

    flex:1,

    backgroundColor : "tomato",

  },

  city : {

    flex : 1.2,

    // backgroundColor: "blue",

    justifyContent: "center",

    alignItems: "center",

  },

  cityName: {

    color : "black",

    fontSize : 80,

    fontWeight: "500",

  },

  weather : {

    // backgroundColor : "blue",

  },

  day: {

    width: SCREEN_WIDTH,

    alignItems : "center",

    // backgroundColor: "teal",

   

  },

  temp : {

    marginTop : 50,

    fontSize : 156,

  },

  description : {

    marginTop : -10,

    fontSize : 50

  },

  tinyText : {

    fontSize :  20,

  }

});

 

위치정보 로드

로딩중 화면 생성

레이아웃에 맞는 페이지 설정

스크롤 설정