study/react native

[날씨 앱] 우선 로딩되는 화면을 만들어 보자!

mimizzang 2019. 5. 8. 00:08

영화 웹페이지를 만들 때처럼, 우선 우리에게 필요한 것은 기동 시 대기 시간 동안 출력되는 화면이다.

 

 

다음과 같이 state를 만들어 준다. 만약 load가 완료되었다면, 우리는 정상적인 날씨 화면을 출력할 것이다. 만약 load가 완료되지 않았다면?? => 로딩 화면을 띄워줌.

 

App class 내부의 render 함수

 

로딩 화면은 다음과 같다. 우선 state를 정해 주고, 만약 load가 되었다면? Getting the fucking weather 출력해준다. 출력해줄 텍스트와 화면을 모두 js 파일 내부에서 만들어 주는데 이 부분이 신기했다. css와 비슷한데 다른 느낌?!

 

 

Style Sheet들

 

그리고 나서 save해주면, 핸드폰과 내가 만들고 있는 코드가 터널로 연결되어 있다면 expo앱에서 다음과 같은 화면을 확인할 수 있다.!

 

 

 

진짜 재밌다.. 빨리 다 보고 다른 어플리케이션 만드는 것도 배워서 내가 만들고 싶은 어플리케이션을 만들 수 있게되면 좋겠다.. ㅠㅠ!!