[리엑트 네이티브] 레이아웃

레이아웃을 이해하기 위한 3가지 요소

[1] flexDirection

 - flex를 레이아웃의 수직 수평을 결정 

   => 수평 : row, 수직 : column

[2] JustifyContents

 - flexDirection에 의해 결정된 방향과 동일

  => 종류 : 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'

 

[3] alignItems

 - flexDirection에 의형 결정된 방향과 반대 방향

  => 종류 : 'flex-start', 'flex-end', 'center', 'space-between', 'space-around'

읽어도 모르겠죠?? 

예시로 설명해 보겠습니다.

<코드>

import React from 'react';
import { AppRegistry, View } from 'react-native';
					
class Example extends React.Component {
  render() {
	return (
	  // Try setting `flexDirection` to `row`.
	  <View style={{
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center',
                alignItems : 'center'
	  }}>
		<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
		<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
		<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
	  </View>
	);
  }
};
					
AppRegistry.registerComponent('AwesomeProject', () => Example)

지금부터 정확하게 이해했는지 확인해 봅시다

1. 종이를 꺼냅니다.

2. 코드를 보고 종이에 레이아웃을 그려봅니다.

결과는 아래와 같습니다

간단하게 레이아웃에 대해 알아봤습니다.

정말 간단하게 알아봤기 때문에

직접 flexDirection의 값들을 하나씩 수정해 가면서 어떤 의미가 있는지 확인해보세요.