React-Native에 View 대해 알아보기

React-Native View 컴포넌트에 대해 알아보기

React-Native 는 거의 대부분을 너비와 높이에 기반해서 레이아웃을 디자인 하지 않는다.

⇒ width , height를 거의 사용하지 않는다는 뜻이다.

스크린의 크기에 따라 보이는게 천차만별이기 때문이다.

반응형 디자인에 대해 생각해야된다. 수많은 스크린들을 고려하면서 디자인 해야될것!

아이콘이나 아바타는 width 나 height 를 사용할 수 있지만 레이아웃에서는 사용하지 않는다.

View 기본적으로 flex 속성을 가지고 있다.

 <View style={{ flex: 1 }}>

 

일반적으로 웹에서는 display : flex 를 하고 flex-direction: row; 를 하는 속성을 넣어줘야 되지만 React-Native View 는 기본적으로 flex 속성을 가지고 있다.
그리고 React-Native에서 Flex Direction의 기본값은 Column 이다

React-Native에서 레이아웃을 표현하는 법

React-native 에서는 flex 를 기준으로 레이웃을 표현한다.

<View style={{ flex: 1 }}>
  <View style={{ flex: 1, backgroundColor: 'tomato' }}></View>
  <View style={{ flex: 5, backgroundColor: 'lightskyblue' }}></View>
  <View style={{ flex: 1, backgroundColor: 'seagreen' }}></View>
</View>

다음과 같이 하게된다면

부모 1의 비율에서 1:5:1 로 레이아웃이 나눠지게 된다.