[Capstone] React Native Layout

스크린을 만들다가 자꾸 expo가 죽어서 레이아웃을 더럽게 짜서인가... 하여 정리해둡니다..

Flex: 크기를 비율로 설정하는 것

Flex Direction: 부모 뷰에서 지정하는 속성이고, 자식 뷰를 어떻게 구성할 건지 알려주는 속성이다.

default 값은 column이다.

width와 height 속성은 정수로 절대값을 줄 수도 있지만 백분율을 이용해서 퍼센테이지로 지정이 가능하다.
ex) width: "100%" -> 해당 뷰의 넓이를 부모 뷰 넓이의 100%만큼 차지
height: "100%" -> 해당 뷰의 높이를 부모 뷰 높이의 100%만큼 차지

Flex Direction 속성

• column: 왼쪽에서부터 가로로 쌓인다.
• row: 왼쪽에서부터 세로로 쌓인다.
• column-reverser: 오른쪽에서부터 가로로 쌓인다.
• row-reverse: 오른쪽에서부터 세로로 쌓인다.

JustifyContent

자식 컴포넌트를 부모 컴포넌트 flexDirection 속성에 맞게 정렬해주는 속성
flexDirection이 column일 경우 세로를 기준으로 정렬, row일 경우 가로를 기준으로 정렬
column이 default이다.

flexDirection이 column인 경우

• space-between 속성은 양끝 정렬을 하되 양끝에는 공백이 없이 정렬을 한다.
• space-around 속성은 양끝 정렬을 하되 양끝에 공백이 포함이 되어 정렬을 한다.

flexDirection이 row인 경우

• space-between 속성은 양끝 정렬을 하되 양끝에는 공백이 없이 정렬을 한다.
• space-around 속성은 양끝 정렬을 하되 양끝에 공백이 포함이 되어 정렬을 한다.

space-evenly 속성: space-around인데 공백의 크기가 다 같다.

alignItems

alignItems 속성은 justifyItems와 반대되는 축의 정렬을 도와주는 속성이다.
flexDirection이 column일 경우 가로 기준으로 정렬을 해주고 row일 경우 세로를 기준으로 정렬을 해준다.

• stretch 속성은 해당 축의 크기를 지정하지 않으면 자동으로 영역 전체를 차지하게 만드는 속성이다.
• flex-start 반대축의 정렬방향대로 정렬
• flex-end 반대축의 정렬 반대방향대로 정렬
• center 가운대 정렬

alignSelf

부모 컴포넌트의 alignItems 속성을 무시하고 싶은 자식 컴포넌트가 있을 때 자식에게 주는 속성

• flex-start, flex-end, center, stretch

Flex Wrap

부모 컴포넌트에 주는 속성으로 자식 컴포넌트의 개수가 많아 부모 컴포넌트의 크기를 넘어가게 될 경우 주는 속성이다.

• noWrap: 크기에 상관없이 무시하고 진행한다
• wrap: 부모컴포넌트의 크기보다 커질 경우 줄바꿈을 실시한다.

AlignContent

flexWrap 속성을 wrap으로 주었을 때 어떤 식으로 정렬할지를 알려주는 속성이다.