[날씨앱] 날씨 화면 구성과 아이콘 넣는 방법!
흐음... 사실 어플리케이션을 다 만들었는데, 포스팅을 미루다 보니 어디 부분을 어떻게 만들었었는지 조금 까먹었다ㅠㅠ
앞으로는 만들고 바로 바로 포스팅을 ...
아무튼 지난 시간에 로딩화면 만들기를 성공하였다! 이제 날씨 화면 만들기!!
우리가 만들 날씨 화면은 다음과 같다. 구성을 살펴보자. 아이콘 + 온도 + main title + subtitle로 이루어져 있다.
우선 새로운 파일을 추가해줘야 한다. 이름은 weather.js로 만들어 주었다.
디자인부터 먼저 해보자면, 다음과 같이 코드를 구성해주면 된다.
upper 부분이 아이콘과 온도가 들어갈 부분이 되고, lower 부분이 title이 들어갈 부분이 된다. 둘의 비율은 같게 해줄 것이므로 flex를 1로 준다. flex가 큰 부분이 더 큰 비율을 차지하게 된다고 생각하면 된다!
아이콘은 다음과 같은 라이브러리를 추가해주면 된다! 엑스포에서 제공하는 아이콘인데, 여기 있는 아이콘 이름을 넣어주면 아이콘을 바로 사용할 수 있다. 사이트는 여기다!
https://expo.github.io/vector-icons/
@expo/vector-icons directory
expo.github.io
(linear gradient 사용하면 색깔 지정할 때, 그라데이션 줄 수 있다!)
자 이제 구성만 해주면 된다!
colors 부분은 저렇게 만들면 첫번째 색깔부터 두번째 색깔까지 자연스럽게 그라데이션이 된다. 같은 크기를 가지는 view를 두 개 주고, 첫 번째 view안에는 icon과 text를 넣어주었다. 이때 여기 오는 text가 온도를 나타내는 text가 된다!
두 번째 view에는 maintitle과 subtitle을 text로 줬다. 실행해보면 잘 동작하는 것을 확인할 수 있다!