ScrollView

리액트 네이티브로 앱을 구현할 때 View로 구현을 하게 되는데,
스크롤이 있는 화면을 원한다면 View 대신 ScrollView로 구현할 수 있다.

<ScrollView>
	<View>
    </View>
</ScrollView>

그럼 여기서 ScrollView안에 있는 내용들이 스크롤이 생기는 내용들이다.

기본

<ScrollView>
	<View>
    </View>
</ScrollView>

• 이렇게 기본 ScrollView 구조로 가면 스크롤이 세로로 생긴다.

가로 스크롤

<ScrollView
	horizontal
>
	<View>
    </View>
</ScrollView>

• horizontal 요소를 넣으면 가로로 스크롤을 생성할 수 있다.

style

<ScrollView
	horizontal
    contentContainerStyle={styles.weather}
>
	<View>
    </View>
</ScrollView>

• 기존 style로 했던 스타일을 contentContainerStyle로 해야 원래 적용했던 스타일을 적용할 수 있다. 그렇지 않으면 원래 적용했던 스타일대로 적용이 되지 않는다. 깨져서 나타난다..!

pagingEnabled

<ScrollView
	horizontal
    contentContainerStyle={styles.weather}
    pagingEnabled
>
	<View>
    </View>
</ScrollView>

• pagingEnabled 요소를 넣게 되면 스크롤이 깔끔하게 넘어간다.

showsHorizontalScrollIndicator

<ScrollView
	horizontal
    contentContainerStyle={styles.weather}
    pagingEnabled
    showsHorizontalScrollIndicator = {false}
>
	<View>
    </View>
</ScrollView>

• showsHorizontalScrollIndicator={false} 요소를 넣게 되면 아래 스크롤로 인해 생긴 페이지네이션이 없어진다.
  

화면의 전체 넓이, 높이 측정

import { Dimensions } from "react-native";
const { width: SCREEN_WIDTH } = Dimensions.get("window");

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

• 이렇게 Dimensions를 import 하면 화면의 전체 넓이와 높이를 측정할 수 있다.
• width를 상수로 설정해주고 스타일에서 활용할 수 있다.