2.6 Styles part two

Web의 경우 화면보다 내용이 더 넘쳐날 경우 자동적으로 스크롤이 생기지만,

App의 경우 그렇지 않다.

그래서 Android의 경우에는 스크롤 기능이 가능하도록

ListView, RecyclerView 와 같은 특수한 뷰를 통해서 스크롤 기능을 부여하고 있다.

 

React Native 역시 스크롤이 가능하도록 특수한 뷰를 부여하는데,

그 뷰가 바로 ScrollView 이다.

 

import { StatusBar } from "expo-status-bar";
import React from "react";
import { View, Text, StyleSheet, ScrollView } from 'react-native';

export default function App() {
  return (
    <View style={style.container}>
      <StatusBar style="light" />
      <View style={style.city}>
        <Text style={style.cityName}>서울</Text>
      </View>
      <ScrollView style={style.weather}>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const style = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "hotpink"
  },
  city: {
    flex: 1,
    justifyContent: "center", //세로에서 중앙
    alignItems:"center" //가로에서 중앙
  },
  cityName: {
    fontSize: 68,
    fontWeight: "500"
  },
  weather: {
    flex: 3
  },
  day: {
    flex: 1,
    alignItems: "center",
  },
  temp: {
    marginTop: 50,
    fontSize: 178,
  },
  description: {
    marginTop: -30,
    fontSize: 60,
  },
});

기존 View의 style이 day 인 부분을 여러개 복사하고

day의 부모뷰인 weather을 ScrollView로 변경하고, import를 추가해주었다.

그럼 그 부분에 세로방향의 스크롤이 생기면서 여러개의 day View들을 다 보여주는 것을 확인할 수 있다.

 

그렇다면, 세로방향이 아니라 가로방향으로 스크롤이 생기게 하고싶다면 어떻게 해야할까?

<ScrollView horizontal>
	...
</ScrollView>

이런식으로 ScrollView 태그 안에 horizontal 단어를 추가해주면 된다.

 

그리고, ScrollView에 스타일을 추가하고 싶다면 style prop을 써도 되지만,

contentContainerStyle 로 스타일을 추가해주면 더 좋다.

<ScrollView horizontal contentContainerStyle={style.weather}>
	...
</ScrollView>

그리고 contentContainerStyle에서 flex를 주고 있다면 스크롤이 갑자기 막힐 수 있다.

왜냐하면, scroll이 되는 부분은 당연히 바깥쪽 태그인 부모태그보다 더 크기가 커야하기 때문이다.

그래서 ScrollView 부분에서는 flex를 style에 넣으면 절대 안.된.다!

그리고 그 하단의 자식View에서도 마찬가지로 flex를 넣으면 안된다.

 

그리고 expo 앱 자체 내에는 개발자 메뉴가 있는데,

원래는 expo go 앱을 흔들면 개발자 메뉴가 나타난다.

그러나, 우리는 지금 안드로이드 에뮬레이터로 보고있으므로 Ctrl+M 을 통해서 개발자 메뉴를 볼 수 있다.

iOS 에뮬레이터의 경우 command+M으로 개발자 메뉴를 볼 수 있다.

 

개발자 메뉴에서 show element inspector를 클릭하면 새로운 탭이 하단에 생기는데,

이걸 사용하면 각 element의 진짜 크기를 알 수 있다.

이것으로 각 element를 조절 가능하다.

 

만약에 ScrollView의 전체 길이를 알고싶다면,

길이를 측정할 수 있는 API를 가져오면 된다.

(reactnative.dev 화면에 들어가면 볼 수 있다.)

 

ScrollView 길이를 측정하는 API는 dimensions로,

이것을 사용하면 화면의 크기를 얻을 수 있다.

import { Dimensions } from 'react-native';

const { height, width } = Dimensions.get("window");

console.log(width);

이런식으로 console을 찍어서 확인 가능하다.

(export 위에 상단에 찍는게 코드상에서 보기좋다.)

 

이 dimensions를 활용해서 ScrollView의 자식뷰를 가운데에 배치시킬 수 있다.

import { View, Text, StyleSheet, ScrollView, Dimensions } from 'react-native';

const { width: SCREEN_WIDTH } = Dimensions.get("window");
// object 안에 있는 width를 가져오고, 그 이름을 SCREEN_WIDTH로 바꾼다는 뜻이다.
// const SCREEN_WIDTH = Dimensions.get("window").width; 와 동일함.

console.log(SCREEN_WIDTH);

export default function App() {
  return (
    <View style={style.container}>
      <StatusBar style="light" />
      <View style={style.city}>
        <Text style={style.cityName}>서울</Text>
      </View>
      <ScrollView horizontal contentContainerStyle={style.weather}>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
        <View style={style.day}>
          <Text style={style.temp}>27</Text>
          <Text style={style.description}>Sunny</Text>
        </View>
      </ScrollView>
    </View>
  );
}

const style = StyleSheet.create({
  ...
  day: {
    width: SCREEN_WIDTH,
    alignItems: "center",
  },
  ...
});

이런식으로 변수명을 지정해서 직접 style에 width 값을 지정 가능하다.

 

이제 ScrollView의 다른 props를 사용해볼 것이다.

pagingEnabled을 사용해 paginate를 해줄 것이다.

pagingEnabled는 Scroll을 자유롭게 하지 못하는 대신 페이지가 생기게 해주는 역할이다.

 

그리고 하단의 페이지가 표시되는 바가 있을텐데 이것을 숨겨주는 props를 사용해볼 것이다.

(이것은 web에서의 scroll indicator 또는 horizontal scroll indicator visible과 같은 것이다.)

showsHorizontalScrollIndicator (가로 바 Indicator) / showsVerticalScrollIndicator (세로 바 Indicator)

위의 2개가 바로 페이지바를 숨겨주는 props이다.

 

사용법은

표시하려면 showsHorizontalScrollIndicator = {true},

숨기려면 showsHorizontalScrollIndicator = {false}

로 표시하면 된다.

 

indicator에 직접 스타일을 지정할 수 있다.

indicatorStyle="white" 이런식으로 페이지바를 하얀색으로 바꿔줄 수 있다.

하지만 iOS 에서만 가능하다.

 

반대로 안드로이드에서만 가능한 스타일도 있다.

persistentScrollbar 로 페이지바가 투명해지는 것을 막아주는 역할을 한다.

 

나머지는 ReactNative 개발 상세페이지에서 다양한 props들을 보는 것을 추천한다.