[React Native] 날씨 어플 만들기 - 스크롤

동일한 View 를 여러개 생성해 주었지만 스크롤이 안된다.
왜냐하면 브라우저가 아니기 때문이다.

React Native는 모든게 Component 이다.

우리가 사용할 Component는 ScrollView 이다.
Props 가 많긴 하지만 다 배우진 않을 거다.

ScrollView 를 적용하면 iOS에서는 바운싱 효과가 적용되나 안드로이드에서는 그렇지 않다.

우리는 세로가 아닌 가로로 스크롤을 하고 싶다.
그렇때 Props 에서 horizontal 을 찾아 사용하자.

그치만 문제가 생겼다. 바로 사이즈가 달라진 것이다.
이전 까지는

위의 city 보다 weather 이 더 컸는데

무슨 일이 일어난거냐면, ScriollView 를 쓸때 style을 만들고 싶다면
Style prop을 쓰면 안된다. 대신에 사용해야하는 것은 Container Style 이라는 것이다.

ScrollView 에서의 정식 명칭 : contentContatinerStyle

이러한 내용을 외워야 할 필요는 없다. Documentation을 살펴보면 될 일이다.

하지만

대신에 또 다른 문제가 생겼는데 그게 뭐냐고 스크롤이 안되는 것이다.
이건 style 에서 flex를 줬기 때문인데, 스크롤이 되어야 하는 전체 구간은 화면보다 당연히 크기 때문에 그렇다.

또한 day 안의 flex 또한 잘 작동을 하지 않기 때문에 삭제해 준다.

이렇게 element 의 크기를 확인하고 싶을 때 좋은 방법이 있는데

휴대폰을 흔들어주거나, expo를 실행중인 콘솔창에서 m 을 눌러주면 휴대폰 화면에

작은 탭들 (App 등등) 을 클릭하면 상세한 property 값들도 볼 수 있다.

이제 다시 Element Inspector 를 종료하고 화면을 구성해 보자.

이렇게 구성되는 걸 원한게 아니었다. 온도와 상태를 알려주는 저 View 하나가 보여줘야 하는데 그럴 려면 하나의 day 가 전체화면 크기가 되야 할 것이다.
전체 화면이 얼마인지 어떻게 알까?

width 값에 숫자를 맞춰 가다 보면 이렇게 어림잡아 맞게 될 지도 모른다.
하지만 이런식으로 비율이 아닌 숫자값을 주게 되면 안드로이드, iOS 등 다른 운영체제의 다른 스크린 사이즈에서는 원하던 모습을 안보일 것이다. 이걸 원했던 것은 아니다.

그렇기에 API를 찾아보자. 분명 실행중인 기기의 screen size을 알려주는 API 가 있을 것이다.

Dimensions 을 사용하면 사이즈를 구할 수 있다.

이런식으로 변수명을 변경해 줄 수 있다.

이게 의미하는 바는 object 안에 있는 width 를 가지고 나와 그 이름을 이것으로 바꾼다는 것을 의미한다.

그치만 스크롤이 이상하게 되고 있다. 무슨 말이냐면 항목에서 멈추지 않고 않고 중간에서 멈춘다.

우리가 스크롤을 자유롭게 하지 못하게 하고 대신 페이지가 생기게 한다.
페이지 생성하게.

좀 더 끈끈하게 움직이게 된다. 근데 페이지 표시칸이 뜬다 하단에

scroll indicator / horizontal scroll indicator visible 의 명칭을 가졌을 법한 게 표시가 된다.

없애는 Props 를 찾아보자

위 사진 처럼 하면 안되고 아래 처럼

 showsHorizontalScrollIndicator={false}

중괄호 안에 써줘야 한다.

하지만 이 ScrollIndicator 를 꾸미고 싶을 수도 있다. 그런 경우에도 Props 가 아래와 같이 준비가 되어 있는데, 보면 iOS 전용이다. 이것은 React Native 가 운영체제와 소통함을 의미함과 동시에 한쪽에서는 되고 한쪽에서는 안되는 것도 있음을 의미한다.

이렇게 말이다.

https://nomadcoders.co/react-native-for-beginners/lectures/3125