날씨(Weather),위치(Location) api 연습

1. npx expo install expo-location  

2. import * as Location from 'expo-location';

3.  위치 코드

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

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

  // 위치 API => Location

  const getWeather = 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)

  };

   useEffect(()=>{

    getWeather();

   },[])

 

4. 날씨까지 완성 코드

import * as Location from 'expo-location';

import { useEffect, useState } from 'react';

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

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

const API_KEY = "ㅁㄴㅇ"

export default function App() {

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

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

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

  // 위치 API => Location

  const getWeather = 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();

    // console.log(json.daliy)

    const { list } = await (

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

    ).json();

    const filteredList = list.filter(({ dt_txt }) => dt_txt.endsWith("00:00:00"));

    setDays(filteredList);

  };

  useEffect(() => {

    getWeather();

  }, [])

  return (

    <View style={styles.container}>

      <View style={styles.city}>

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

      </View>

      <ScrollView

        showsHorizontalScrollIndicator={false}

        pagingEnabled

        horizontal

        contentContainerStyle={styles.weather}>

        {days.length === 0 ? (

          <View style={styles.day}>

            <ActivityIndicator

              style={{ marginTop: 10 }}

              color="white"

              size="large"

            />

          </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: "teal",

  },

  city: {

    flex: 1,

    justifyContent: "center",

    alignItems: "center",

  },

  cityName: {

    fontSize: 68,

    fontWeight: "500",

  },

  weather: {

  },

  day: {

    width: SCREEN_WIDTH,

    alignItems: "center",

  },

  temp: {

    marginTop: 50,

    fontSize: 178,

  },

  description: {

    marginTop: -30,

    fontSize: 50

  },

  tinyText: {

    fontSize: 20

  }

})