React Native 날씨앱 만들기3 (노마드코더)

이번에는 React Native에서 Icons을 적용해볼 것이다.

 

사용하는 방법에 대한 문서는 아래 URL에 있는 문서를 참고할 것이고,

https://docs.expo.dev/guides/icons/

Icons - Expo Documentation

 

아이콘을 가져오는 사이트는 아래의 사이트를 사용해서 가져올 것이다.

https://icons.expo.fyi/

@expo/vector-icons directory

 

1. 아이콘 Object 셋팅해주기 

아이콘을 가져오는 방식은 뜨는 날씨의 상태마다 다를 것이다. 예를 들어 아래와 같다. 

1) 맑음 (Clear) = 해 아이콘

2) 흐림 (Clouds) = 구름 아이콘

3) 비 (Rain) = 비 아이콘

 

"Clear"라는 글짜의 상태가 되면 아이콘의 이름을 사용해서 가져올 것이다.

즉, Object를 사용해줄 것이다. 

아이콘의 이름이 "Sunny" 라면, 

"Clear": "Sunny" 라는 상태로 셋팅해줄 수 있을 것 같다. 

 

그런데 셋팅할 수 있는 상태의 값이 어떻게 되는지 정의할 수 없다면 문서를 참고해서 나오는 상태를 파악해서 셋팅해주면 된다.

문서는 날씨 API를 가져왔던 사이트 API에서 확인할 수 있다.

https://openweathermap.org/weather-conditions

Weather Conditions - OpenWeatherMap

 

이러한 방식으로 Object 셋팅해주면 이렇게 셋팅할 수 있을 것이다.

const icons = {
  "Thunderstorm": "lightning",
  "Drizzle": "rains",
  "Rain": "rain",
  "Snow" : "snowflake",
  "Atmosphere": "cloudy-gusts",
  "Clear" : "day-sunny",
  "Clouds": "cloudy",
};

 

2. 아이콘 import 하기

아이콘을 사용하기 위해서 import를 해줄 것이다.

import { Fontisto } from '@expo/vector-icons';

Fontisto 아이콘을 사용해줄 것이기 때문에 이렇게 import 해주었다.

 

날씨 온도 옆 쪽에 아이콘을 위치해줄 것이기 때문에 temp Text와 밑에 쪽에 아이콘을 위치해주고 둘을 같이 하나의 View로 합쳐준다.

<View style={{ 
	flexDirection: "row", 
	alignItems: "center", 
    justifyContent: "space-between",
    width: "100%"
	}}
>
	<Text style={styles.temp}>{parseFloat(day.temp.day).toFixed(1)}</Text>
    <Fontisto name={icons[day.weather[0].main]} size={68} color="white" style={{marginRight: "4%"}}/>
</View>

 

이렇게 셋팅해주면 아래의 화면을 볼 수 있을 것이다.

완성된 화면이다! React Native을 사용해서 날씨앱 만들기 끄읕!