[React Native] React Native로 날씨앱 만들기 (11 完)

티스토리 뷰

React Native

코딩브론즈 2021. 4. 27. 22:56

이번 포스트에서는 배경색 작업을 할 것이다.

css에서는 gradient만드는것이 쉽지만 리엑트 네이티브에서는 뭘 좀 더 해줘야하는데, LinearGradient 를 사용해야한다.

LinearGradient - Expo Documentation

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

docs.expo.io

expo install expo-linear-gradient

이제 expo-linear-gradient 모듈에서 LinearGradient를 사용해보자

다음은 LinearGradient 가뭔지 한방에 이해할 수 있는 사진이다

이처럼 나열된 색을 위에서부터 아래 방향으로 그라데이션을 준다고 생각하면 된다!

이제 다시 앱으로 ㄱㄱ

또 상단의 StatusBar 도 뭔가 밋밋하다.

react-native 모듈에서 StatusBar 를 가져와서 꾸며주자.

참고로 StatusBar는 무조건 props를 줘야지 변화가 나타난다.

솔직히 기존게 더 나은거같다..

일단 로딩페이지도 똑같이 적용해주자.

찰나의 로딩화면을 겨우 캡쳐했다. 좋았어!

이제 API에서 가져온 정보로 각각의 상황에 맞는 아이콘과 Gradient를 적용하자!

현재 날씨가 Cloud 상태라서 구름낀 화면이 나왔다.

끝

[React Native] React Native로 날씨앱 만들기 (10) - Icons and Styling (0)	2021.04.27
[React Native] React Native로 날씨앱 만들기 (9) - Displaying Temperature (0)	2021.04.26
[React Native] React Native로 날씨앱 만들기 (8) - API 사용하기 (0)	2021.04.26
[React Native] React Native로 날씨앱 만들기 (7) - Location & Permissions (0)	2021.04.26
[React Native] React Native로 날씨앱 만들기 (6) - Loading Screen (0)	2021.04.25

공지사항

최근에 올라온 글

최근에 달린 댓글

링크

글 보관함