[React-Native] 크기 설정, 정렬 속성에 대해

[React-Native 공부 일지]

 

 

알게 된 사실

 

• React-Native의 주축은 세로다.
• height, width 속성과 flex 속성을 같이 사용하면,
  앞의 두 속성의 값 분배 후 남은 공간에 한해 flex 비율이 정해진다.
  • 이때, height 속성의 값을 px로 하면 에러가 난다. 반드시 %로 분배할 것.
• flex와 %는 부모의 크기에 영향을 받는다. 크기 지정 필수.
• 화면 전체를 감싸는 container의 경우 부모 요소는 화면 전체가 된다.

 

 

 

자주 쓰일 속성

justifyContent: 자식 요소에 대한 주축(main-axis)의 정렬 방식

alignItems: 자식 요소에 대한 교차축(cross-axis)의 정렬 방식

 

 

 

 

공부 자료:

https://yuddomack.tistory.com/entry/5React-Native-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%94%94%EC%9E%90%EC%9D%B8-1%EB%B6%80-flex%EC%99%80-width-height?category=754156#layout