React Native - 레이아웃 정렬

화면에 Component들을 원하는 위치에 정렬하기 위해 설정하는 값들이 있다. 
우선 layout은 기본적으로 좌우로 Component들을 위치시킬 것인지, 상하로 위치시킬 것인지 정할 수 있다. 
또한, Component들이 해당하는 layout에서 얼마정도의 크기를 점유할지 정하는 flex를 알아야 한다.

 

Flex & FlexDirection

flex는 부모 Component안에서 자식 Component 끼리 어느정도의 위치를 점유할 것인지를 나타낸다. 

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

const FlexDirectionBasics = () => {
  return (
    <View style={{flex: 1, flexDirection: 'row'}}>
      <View style={{flex:1, backgroundColor: 'red'}} />
      <View style={{flex:1, backgroundColor: 'green'}} />
      <View style={{flex:3, backgroundColor: 'blue'}} />
    </View>
  );
};

export default FlexDirectionBasics;

flexDirection: 'row'

위의 코드에서 blue의 flex를 3으로 설정하여 flex를 1로 설정한 다른 View보다 넓은 위치를 점유하는 것을 볼 수 있다.
또한, 부모 View의 flexDirection이 row방향이기 때문에 가로로 view들이 추가되는 것을 볼 수 있다.
화면을 총 5등분(1+1+3 = 5) 하여 1/5은 red, 1/5은 green, 3/5는 blue가 점유한 것이다.

flexDirection을 column으로 바꿔보자.(세로 정렬)

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

const FlexDirectionBasics = () => {
  return (
    <View style={{flex: 1, flexDirection: 'column'}}>
      <View style={{flex:1, backgroundColor: 'red'}} />
      <View style={{flex:1, backgroundColor: 'green'}} />
      <View style={{flex:3, backgroundColor: 'blue'}} />
    </View>
  );
};

export default FlexDirectionBasics;

flexDirection: 'column'

flexDirection이 column으로 변경되니 View들이 세로로 추가되는 것을 볼 수 있다.
row나 column은 왼쪽부터 혹은 위쪽부터 정렬이 된다. 반대를 원한다면 '-reverse'를 붙이면 된다.

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

const FlexDirectionBasics = () => {
  return (
    <View style={{flex: 1, flexDirection: 'row-reverse'}}>
      <View style={{flex:1, backgroundColor: 'red'}} />
      <View style={{flex:1, backgroundColor: 'green'}} />
      <View style={{flex:3, backgroundColor: 'blue'}} />
    </View>
  );
};

export default FlexDirectionBasics;

flexDirection: 'row-reverse'

 

 

JustifyContent

JustifyContent는 자식 Component들을 상하에 어떤 방식으로 정렬할 것인지 결정하는 값이다.

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

const JustifyContentBasics = () => {
  return (
    <View style={{flex: 1, flexDirection: 'column', justifyContent: 'center'}}>
      <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
    </View>
  );
};

export default JustifyContentBasics;

화면을 모두 채우는 flex와는 달리 JustifyContent는 width, height를 설정해 주어야 한다. 
상하 정렬을 center로 하면 다음과 같은 화면이 출력된다.

justifyContent: 'center'

다른 값들의 출력 형태이다.

justifyContent: 'flex-end'	justifyContent: 'flex-start'
justifyContent: 'space-around'	justifyContent: 'space-between'
justifyContent: 'space-evenly'

 

 

AlignItems

AlignItems는 자식 Component들을 대각 축에 어떤 방식으로 정렬할 것인지 결정하는 값이다.

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

const JustifyContentBasics = () => {
  return (
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'center'}}>
      <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
    </View>
  );
};

export default JustifyContentBasics;

 

alignItems: 'center'

alignItems: 'baseline'	alignItems: 'flex-start'
alignItems: 'flex-end'

 

alignItems: 'stretch'는 width를 지정하지 않으면 하위 Component는 상위 Component에 맞게 늘어난다.

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

const JustifyContentBasics = () => {
  return (
    <View style={{flex: 1, flexDirection: 'column', alignItems: 'stretch'}}>
      <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
      <View style={{width: 150, height: 50, backgroundColor: 'green'}} />
      <View style={{height: 50, backgroundColor: 'blue'}} />
    </View>
  );
};

export default JustifyContentBasics;

alignItems: 'stretch'