React Native 기초 ( 3일차, CSS로 화면 구성 ex : ScrollView )

공부 전 명상 : 프론트엔드는 재밌다. 한 줄, 한 줄 작성할 때마다 다이나믹하게 변하는 화면을 보고 있자면,

코드 작성에 더 시간과 마음이 가지 않을 수 없다.

 

Location Expo Package : 지리적 위치를 가져오는 많은 function이 담김

1. 위치를 가져옴 (Expo로 좌표를 가져옴)
2. 해당되는 위치의 16일간의 기상예보를 가져옴 (좌표를 날씨 API에 전송함)
3. 우리가 있는 도시 이름과 일기예보 Array를 얻음
4. 기상예보의 name과 description, 온도, 습도

Expo 콘솔 위에서 R키 누르면 Refresh됨
D키를 누르면 development tools로 이동함
M은 toggle menu

두 개의 container(city, cityname, weather, day)

-styles options
flex, backgroundColor, justifyContent : "center", alignItems : "center"
fontSize : 68, fontWeight : "500", marginTop : 50

View는 브라우저가 아니다. 스크롤이 자동으로 안된다.
React Native에서는 ScrollView를 사용해야한다.
*수많은 props들이 있는데, horizontal style은 스크롤 방향을 수평으로 변경해준다.
*contentContainerStyle은 기존의 View를 사용할 때처럼 style flex를 유지시켜준다.

*핸드폰을 흔들고 개발자 메뉴를 열면 show element inspector가 보인다.
여기서는 element의 크기(위치 정보 등)를 살펴볼 수 있다.

*전체 스크린 사이즈를 가져오는 방법
- Dimensions라는 API를 불러와서 화면 크기를  얻을 수 있음
- const { width : SCREEN_WIDTH } =  Dimensions.get{"window"}

*ScrollView의 props 중에 pagingEnabled : 스크롤을 자유롭게 못하게 함, 대신 페이지를 생성해줌
*ScrollView의 props 중에 showHorizontalScrollIndicator = {false}를 추가함으로써 스크롤이 안보이게 함
*Scroll Indicator의 스타일을 변경하려면 indicatorStyle = "White" 등으로 사용 가능 (Android에서는 안됨)
persistentScrollbar은 안드로이드에서만 가능(이처럼 IOS와 안드로이드의 지원되는 기능 차이가 존재)

*로그 출력
console.log(SCREEN_WIDTH);

공부 후기 : CSS는 언어가 아니다.... 찐또배기 프로그래밍 할 때의 손맛이 그립다......

아 그리고 4월 16일부터 21일까지는 휴가다 (●'◡'●)