React Native Tutorial 따라하기 – Height and Width

Component의 Height과 Width를 설정하기 위한 방법으로는 두 가지가 있다. 하나는 Fixed Dimensions이고 다른 하나는 Flex Dimensions이다.

Fixed Dimensions

Fixed는 우리가 기존에 pixel 값을 사용하던 것과 유사하다. 다음은 예제이다.

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

export default 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>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FixedDimensionsBasics);

보는 것과 같이 height, width 값에 따라 크기가 달라지는 것을 알 수 있다.

Flex Dimensions

Flex Dimensions는 이름에서 알 수 있듯이 동적으로 화면 크기에 따라 크기가 달라지는 타입이다. flex라는 값으로 영역을 비율에 따라 나누어 배정한다. 다음은 예제다.

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

export default 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>
    );
  }
}

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);

상위 컴포넌트의 flex 값이 1로 되어 있는데 해당 값으로 전체 화면을 차지하도록 되어 있고 하위 component들이 1:2:3의 비율로 공간을 나누어 가진 것을 알 수 있다.

flex의 응용으로 다양한 형태의 layout 구성이 가능하다. 참고 링크를 활용하여 layout 구성에 대해 응용 해볼 수 있다.

https://facebook.github.io/react-native/docs/flexbox