[React Native] 스타일링 속성들(2)

flex

고정값을 사용하지 않는 이유

기기마다 화면 크기의 차이 때문에 서로 다른 모습으로 나타나고 이런 다양한 크기의 기기에 대응하기 어렵기 때문.

 

따라서 비율로 크기가 설정되는 flex로 해결

 

• flex가 1인 경우 : 자신이 차지할 수 있는 영역을 모두 차지
• 나머지는 비율대로 차지

---

정렬

1. flexDirection

자식 컴포넌트가 쌓이는 방향

• column : 세로 방향으로 정렬(기본값)
• column-reverse : 세로 방향 역순
• row : 가로 방향으로 정렬
• row-reverse : 가로 방향 역순

2. justifyContent

flexDirection에서 결정한 방향과 동일한 방향으로 정렬하는 속성

• flex-start : 시작점에서부터 정렬(기본값)
• flex-end: 끝에서부터 정렬
• center : 중앙 정렬
• space-between : 컴포넌트 사이의 공간을 동일하게 만들어서 정렬
• space-around : 컴포넌트 각각의 주변 공간을 동일하게 만들어서 정렬
• space-evenly : 컴포넌트 사이와 양 끝에 동일한 공간을 만들어서 정렬

flexDirection이 row인 경우

 

3. alignItems

flexDirection에서 결정한 방향과 수직인 방향으로 정렬하는 속성

• flex-start : 시작점에서부터 정렬(기본값)
• flex-end: 끝에서부터 정렬
• center : 중앙 정렬
• strech : alignItems의 방향으로 컴포넌트 확장
• baseline : 컴포넌트 내부의 텍스트 베이스라인을 기준으로 정렬

flexDirection이 row일 때

---

그림자

iOS와 안드로이드에서 다르게 적용됨으로 각각에 맞추어서 코드를 작성해야 한다.