React Native) flex 레이아웃

레이아웃 영역을 잡아주기 위한 flex 개념을 익혀봄

 

---

 

flex

주어진 공간을 얼만큼 채울지 정함
- 숫자를 넣어서 비율을 주는 방식

import React from 'react';
import { View } from 'react-native';

const FlexDemo = () => {
  return (
    <View style={{ marginTop: 30, height: '100%' }}>
      <View style={{ flex: 1, backgroundColor: '#e93e43' }} />
      <View style={{ flex: 2, backgroundColor: '#f5a941' }} />
      <View style={{ flex: 3, backgroundColor: '#4ebd7a' }} />
    </View>
  );
};

export default FlexDemo;

[결과]

flex 예시 - 1:2:3

---

 

Flex Direction

flexDirection은 부모가 자식 뷰를 어떤 방향으로 배치할지 정함
- column : 위/아래, 세로 방향(기본값)
- row : 좌/우, 가로 방향
- column-reverse : 아래/위, 역세로 방향
- row-reverse : 우/좌, 역가로 방향

import React from 'react';
import { View, Text } from 'react-native';

const FlexDemo = () => {
  return (
    <View style={{ flex: 1, flexDirection: 'row', margin: 30 }}>
      <View style={{ width: 50, height: 50, backgroundColor: '#e93e43' }}>
        <Text>1</Text>
      </View>
      <View style={{ width: 50, height: 50, backgroundColor: '#f5a941' }}>
        <Text>2</Text>
      </View>
      <View style={{ width: 50, height: 50, backgroundColor: '#4ebd7a' }}>
        <Text>3</Text>
      </View>
    </View>
  );
};

export default FlexDemo;

[결과]

flexDirection 예제 : row, column, row-reverse, column-reverse

---

 

Justify Content

자식뷰를 flexDirection 방향으로 어떻게 정렬할 것인지 지정
- flex-start : flexDirection 지정한 시작 지점에 붙여서 정렬
- flex-end : flexDirection 지정한 끝 지점에 붙여서 정렬
- center : flexDirection 지정한 가운데 지점에 붙여서 정렬
- space-between : flexDirection 지정한 방향으로 정렬할 때, 자식뷰 사이에 발생하는 공간을 동일하게 분배함
(양 끝에 공간 없음)
- space-around : flexDirection 지정한 방향으로 정렬할 때, 자식뷰 양 옆으로도 남은 공간을 동일하게 분배
(양 끝의 공간은 가운데 공간 크기의 절반만 가져감)
- space-evenly : flexDirection 지정한 방향으로 정렬할 때, 자식뷰 양 옆 포함해서 모든 빈 공간의 사이즈가 동일함
(양 끝의 공간과 가운데 공간 크기 모두가 동일함)

import React from 'react';
import { View, Text } from 'react-native';

const FlexDemo = () => {
  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
        margin: 30,
        justifyContent: 'flex-start',
      }}
    >
      <View style={{ width: 50, height: 50, backgroundColor: '#e93e43' }}>
        <Text>1</Text>
      </View>
      <View style={{ width: 50, height: 50, backgroundColor: '#f5a941' }}>
        <Text>2</Text>
      </View>
      <View style={{ width: 50, height: 50, backgroundColor: '#4ebd7a' }}>
        <Text>3</Text>
      </View>
    </View>
  );
};

export default FlexDemo;

[결과]

justifyContent 예제 : flex-start, flex-end, center, space-between, space-around, space-evenly

---

 

Align Item

자식뷰를 정렬할 때, 수직 교차 방향으로 어떻게 정렬할 것인지 지정
- stretch : 교차축 방향으로 공간을 채우기 위해 자식뷰를 늘임
(기본값, 조건 : 교차축 방향으로 width나 height가 설정 안되어야 함)
- flex-start : 교차축 시작 지점에서 부터 정렬
- flex-end : 교차축 끝 지점에서 부터 정렬
- center : 교차축 중앙으로 정렬
(flex-start, flex-end, center는 교차축 방향으로 width나 height가 설정 안되어 있으면 컨텐츠 크기만큼 영역만 할당함)

import React from 'react';
import { View, Text } from 'react-native';

const FlexDemo = () => {
  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'column',
        margin: 30,
        justifyContent: 'center',
        alignItems: 'stretch',
      }}
    >
      <View style={{ width: 50, height: 50, backgroundColor: '#e93e43' }}>
        <Text>1</Text>
      </View>
      <View style={{ height: 50, backgroundColor: '#f5a941' }}>
        <Text>2</Text>
      </View>
      <View style={{ height: 100, backgroundColor: '#4ebd7a' }}>
        <Text>3</Text>
      </View>
    </View>
  );
};

export default FlexDemo;

[결과]

alignItems 예제 : stretch

alignItems : flex-start, center

- baseline : 자식뷰의 공통 베이스 라인(글자 써지는 기준선)을 기준으로 정

import React from 'react';
import { View, Text } from 'react-native';

const FlexDemo = () => {
  return (
    <View
      style={{
        flex: 1,
        flexDirection: 'row',
        margin: 30,
        justifyContent: 'center',
        alignItems: 'baseline',
      }}
    >
      <View style={{ width: 50, height: 50, backgroundColor: '#e93e43' }}>
        <Text style={{ fontSize: 40 }}>A</Text>
      </View>
      <View
        style={{
          width: 50,
          height: 50,
          backgroundColor: '#f5a941',
          justifyContent: 'center',
        }}
      >
        <Text style={{ fontSize: 20 }}>p</Text>
      </View>
      <View style={{ width: 50, height: 100, backgroundColor: '#4ebd7a' }}>
        <Text style={{ fontSize: 40 }}>E</Text>
      </View>
    </View>
  );
};

export default FlexDemo;

[결과]

alignItems : baseline

---

 

참고 사이트

https://tech.10000lab.xyz/reactnative/react-native-flex.html

React Native 플렉스박스 레이아웃 - 스타트업 엔지니어링

https://reactnative.dev/docs/flexbox

Layout with Flexbox · React Native

https://reactnative.dev/docs/layout-props

Layout Props · React Native