React Native - Layout System

리액트네이티브의 레이아웃은 Flexbox를 사용해야한다.

Flexbox는 웹의 CSS와 거의 비슷하다.

 

웹에서는 display:flex;로 지정을 해주고 나서야, flex-direction을 사용할 수 있었다.

React Native는 기본이 flex이며, flex-direction의 기본값은 column이다. (웹에서는 기본값이 row)

반응형 레이아웃 고려가 필수! (width, height 속성 사용하지 않음)
→ 숫자만 생각하면 된다 = 비율로 생각하면 된다. 모든 View가 Flex Container이기 때문에, Flex Size를 지정해준다.

부모요소의 flex size를 지정해준뒤, 자식요소들을 원하는 비율로 나눈다고 생각하면 된다.

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1, backgroundColor: "skyblue" }} />
      <View style={{ flex: 5, backgroundColor: "pink" }} />
      <View style={{ flex: 1, backgroundColor: "skyblue" }} />
    </View>
  );
}

iphone XR

어느 디바이스에서든, 비율에 맞게 화면에 나타난다.