1. Home
  2. 리액트 네이티브[React Native] 0.4x
  3. 기본[THE BASICS]
  4. Height와 Width

Height와 Width

컴포넌트의 높이(Height)와 너비(Width)가 화면의 크기를 결정합니다.

고정 치수(Fixed Dimensions)

컴포넌트의 크기를 설정하는 가장 간단한 방법은 고정 너비와 높이를 스타일에 추가하는 것입니다. React Native의 모든 치수는 단위가 없으며 밀도와 무관한 픽셀을 나타냅니다.

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

class FixedDimensionsBasics extends Component {
  render() {
    return (
      <View>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} />
        <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

이 방법으로 치수를 설정하는 것은 화면 크기에 관계없이 항상 정확히 동일한 크기로 렌더링해야 하는 컴포넌트에 일반적입니다.

유연한 치수(Flex Dimensions)

컴포넌트의 스타일에서 flex를 사용하여 사용 가능한 공간에 따라 컴포넌트를 동적으로 확장 및 축소시킬 수 있습니다. 일반적으로 ‘flex: 1’을 사용하면 컴포넌트에 사용 가능한 공간을 모두 채우고 같은 부모를 가진 각 컴포넌트에 균등하게 공유할 수 있습니다. 주어진 flex 값이 클수록 다른 컴포넌트에 비해 해당 컴포넌트가 차지하는 공간의 비율이 높아집니다.

컴포넌트의 부모가 0보다 큰 치수를 가지는 경우, 컴포넌트는 사용 가능 공간을 채우기 위해서만 전개할 수 있습니다. 부모가 고정 폭과 높이 또는 flex를 가지지 않는 경우, 부모의 치수는 0으로 되어 있어 flex 자식 컴포넌트는 표시되지 않습니다.

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

class FlexDimensionsBasics extends Component {
  render() {
    return (
      // Try removing the `flex: 1` on the parent View.
      // The parent will not have dimensions, so the children can't expand.
      // What if you add `height: 300` instead of `flex: 1`?
      <View style={{flex: 1}}>
        <View style={{flex: 1, backgroundColor: 'powderblue'}} />
        <View style={{flex: 2, backgroundColor: 'skyblue'}} />
        <View style={{flex: 3, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

컴포넌트의 크기를 제어할 수 있게 되면 다음 단계는 화면에 레이아웃하는 방법을 배우는 것입니다.

Was this article helpful to you? Yes No

How can we help?