[RN] WeatherApp 만들기 - Icons 사용하기

expo안에 expo/vector icon이 있다. 여긴 많은 아이콘이 있는 라이브러리이다. 

 

https://icons.expo.fyi/

@expo/vector-icons directory

 

날씨가 흐리면 흐린 이모티콘을 UI에 보여줄 것이고 날씨가 좋으면 햇빛 이모티콘을 UI에 보여줄 것이다.

 

Fontisto 스타일의 아이콘을 import해온다.

 

날씨에 대한 정보를 icons라는 객체에 담고

 

 

온도 옆에다가 이모티콘을 달아줄건데 (그렇기에 View에 flexDirection을 row로 해준것!)

icons[day.weather[0].main]의 정체가 궁금해진다.

객체에 접근할때 예를 들어

const student={name:"meaning",age=21}

이런식으로 객체가 있다면

student.name을 하는 방법도 있지만 student['name']을 하는 방법도 있다.

 

우리가 날씨를 받아올 때는 

day.weather[0].main에 날씨정보가 있는데 json파일은 문자열로 저장이 되기 때문에

그냥 icons[day.weather[0].main]을 하는 것이 더 좋다. 

그러면 icons["Clouds"]의 경우 "cloudy"가 반환되면서 Fontisto 이모티콘의 cloudy에 해당하는 이모티콘이 화면에 뜬다. 

 

 

 

jsx에서 괄호 두개 겹쳐서 표현 

inline 스타일은 괄호를 두개 겹쳐서 표현하는데 바깥쪽 괄호는 자바스크립트이고 안쪽 괄호는 자바스크립트 객체를의미한다. 

 

 

최종코드

 

import { StatusBar } from 'expo-status-bar';
import reactDom from 'react-dom';
import React from "react";
import { StyleSheet, Text,Dimensions, View,ScrollView ,ActivityIndicator} from 'react-native';
import { useEffect,useState } from 'react';
import * as Location from 'expo-location';
import { Fontisto } from '@expo/vector-icons';
 
 
//const {width:SCREEN_WIDTH}=Dimensions.get('window');
const SCREEN_WIDTH=Dimensions.get('window').width;
 
const API_KEY="1d2baeeabe2d115abd22f0095ac955f3";
 
const icons={
  Clouds:"cloudy",
  Clear:"day-sunny",
  Atmosphere:"cloudy-gusts",
  Snow:"snow",
  Rain:"rains",
  Drizzle:"rain",
  Thunderstorm:"ligthning"
}
 
export default function App() {
 
  const[city,setCity]=useState("Loading...");
  const[days,setDays]=useState([]);
 
  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/onecall?lat=${latitude}&lon=${longitude}&exclude=alerts&appid=${API_KEY}&units=metirc`)
    const json=await response.json();
    setDays(json.daily);
  
  };
 
  useEffect(()=>{
    getWeather();
  },[]);
  return (
    <View style={styles.container} > 
      <View style={styles.city}>
        <Text style={styles.cityName}>{city}</Text>
      </View>
      <ScrollView 
      showsHorizontalScrollIndicator={false}
      
      pagingEnabled
      horizontal 
      contentCotainerstyle={styles.weather}
      >
       
        {days.length===0 ?
        <View style={styles.day}>
          <ActivityIndicator 
          color="white"
          style={{...styles.day,alignItems:"center"}}
          size="large"/>
 
          
        </View> :
        days.map((day,index)=>
          <View key={index} style={styles.day}>
            <View style={{flexDirection:"row", 
            alignItems:"flex-end",
            width:"100%",
            justifyContent:"space-between"}}>
            <Text style={styles.temp}>{parseFloat(day.temp.day-273).toFixed(1)}</Text>
            <Fontisto name={icons[day.weather[0].main]}size={68} color="white" />
 
            </View>
           
            <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,
     
      justifyContent:"center",
      alignItems:"center"
    },
    cityName:{
      fontSize:68,
      fontWeight:"500",
      color:"white"
 
    },
    weather:{
      //flex:3,
      
    },
    day:{
      //flex:1,'
      width:SCREEN_WIDTH,
      
      
      alignItems:"flex-start",
      paddingHorizontal: 20,
      //backgroundColor:"teal"
    },
    temp:{
      marginTop:50,
      fontWeight: "600",
      fontSize:100,
      color:"white"
      
 
    },
    description:{
      fontSize:30,
      marginTop:-10,
      color:"white",
      fontWeight: "500"
    },
    tinyText:{
      marginTop: -5,
      fontSize:20,
      color:"white",
      fontWeight: "500",
    }
  });