React Native 기초( 2일 차, Flexbox의 역할 )

ReactNative의 Flexbox에 대하여 : layout과 같은 역할

Flexbox가 웹과 어떻게 다른가?
styles를 설정
View안에 View 컴포넌트 추가 가능
모든 View가 이미 flex container
Flex Direction의 기본 값은 Column/ style에서 Row로 변경 가능
화면에 객체 Overflow가 있다고해서 스크롤 할 수 있지 않음

대부분의 경우(99.8%)로 스크린 사이즈에 대비하여 레이아웃을 짜지 않음
반응형 레이아웃을 제작해야함(당연한 소리)
width나 height를 사용하지 말자는 뜻(UI요소 크기를 픽셀 단위로 정하지 말자)

그럼 어떻게 하느냐?

ReactNative에서는 Flex Size를 줘야함
View는 Flex Container이다.
부모 Container에 {flex : 1}을 줌
마찬가지로 자식들에게 flex : 1을 주면
1대1 비율로 화면에 분배됨(미친 정렬기능!)
그러면 1.5로 하면 어떨까? 그 비율만큼 scale이 커짐