[React Native] React Native로 날씨앱 만들기 (5) - flex Layout

React Native의 레이아웃에 대한 규칙을 알아보자.

 

 

위와 같이 <Text>를 하나 더 추가해보니 바로 밑에 붙었다.

웹 사이트 같았으면 오른쪽에 붙었을텐데 왜 밑에 붙는거지?

=> React Native에서 모든 flex box의 디폴트는 flexDirection이 column이기 때문이다. (웹 사이트의 디폴트는 row)
모바일 폰은 대개 위아래로 길기때문이기도 함.

옆에 붙이고 싶다면 flexDirection : "row"를 쓰면 된다.

flexDirection : "row"

 

container 는 부모이고 flex:1 은 모든 공간을 사용할 수 있다는것을 의미한다.

yellowView와 blueView 는 부모인 container에 속해있다.
flex: 1 이라서 전부를 차지하고 싶지만 둘이라서 반씩 나누는 것이다.

만약 blueView의 flex가 2라면 container의 2/3을 가지게 될 것이다.

 

이것이 flex가 React Native에서 작동하는 방식이다.

전체 공간을 다 차지하고 싶다면 flex: 1,
형제들이 있다면 차지하고 싶은 만틈 숫자를 변경하면 된다.

나머지 작업들도 거의 똑같다. 

React Native에선 width 나 height 같은 것들을 많이 쓸 필요가 없다.

늘 flex로 레이아웃 코딩하길 권장한다.

px 따위로 만들었다간 폰의 크기에 따라서 보이는게 달라질 수 있다.