1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. Flexbox를 이용한 레이아웃

Flexbox를 이용한 레이아웃

컴포넌트는 flexbox 알고리즘을 사용하여 하위 요소의 레이아웃을 지정할 수 있습니다. Flexbox는 다양한 화면 크기에서 일관된 레이아웃을 제공하도록 설계되었습니다.

일반적으로 flexDirection, alignItems 및 justifyContent의 조합을 사용하여 적절한 레이아웃을 얻습니다.

Flexbox는 웹상의 CSS와 마찬가지로 React Native에서 동일한 방식으로 작동하지만 몇 가지 예외가 있습니다. 기본값은 서로 다르며 flexDirection은 행(row) 대신 열(column)이 기본값으로 설정되고 flex 매개 변수는 단일 숫자만 지원합니다.

Flex Direction

컴포넌트의 스타일에 flexDirection을 추가하면 레이아웃의 기본 축이 결정됩니다. 자녀들이 수평(row) 또는 수직 (column)으로 조직되어야 하나요? 기본값은 column입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, flexDirection: 'row'}}>
        <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', () => FlexDirectionBasics);

Justify Content

컴포넌트의 스타일에 justifyContent를 추가하면, 주축(primary axis)에 따른 자식의 배포(distribution)가 결정됩니다. 자식들이 시작(start), 중앙(the center), 끝(the end) 또는 균등한(spaced) 간격으로 배포되어야 합니까? 사용 가능한 옵션은 flex-start, center, flex-end, space-around, space-between 입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class JustifyContentBasics extends Component {
  render() {
    return (
      // Try setting `justifyContent` to `center`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'space-between',
      }}>
        <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', () => JustifyContentBasics);

Align Items

컴포넌트의 스타일에 alignItems를 추가하면 보조축(secondary axis)을 따라 자식 정렬을 결정합니다(기본 축이 row면 보조 요소가 column, 혹은 그 반대). 자식들은 시작, 중심, 끝, 또는 가득차게 늘이기(stretched to fill) 위해 정렬되어야 합니까? 사용 가능한 옵션은 flex-start, center, flex-end 및 stretch입니다.

stretch가 효과를 가지기 위해서는 보조 축을 따라 고정된 치수를 가져야 합니다. 다음 예제에서 “alignItems: stretch” 설정은 “width: 50″이 자식에서 제거될 때까지 아무 작업도 수행하지 않습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

class AlignItemsBasics extends Component {
  render() {
    return (
      // Try setting `alignItems` to 'flex-start'
      // Try setting `justifyContent` to `flex-end`.
      // Try setting `flexDirection` to `row`.
      <View style={{
        flex: 1,
        flexDirection: 'column',
        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', () => AlignItemsBasics);

더 깊이 파기

기본 사항들은 다뤘지만 레이아웃에 필요한 다른 스타일도 많이 있습니다. 레이아웃을 제어하는 props의 전체 목록은 여기에서 보실 수 있습니다.

우리는 실제 앱을 만들 수 있는 것에 가까워지고 있습니다. 우리가 아직 놓치고 있는 한 가지 방법은 사용자 입력을 받는 방법입니다. 그래서 TextInput 컴포넌트로 텍스트 입력을 처리하는 방법을 배우십시오.

Was this article helpful to you? Yes No

How can we help?