React Native 공부 7 - Dimensions

Height & Width

1. Fixed Dimensions (정적으로 지정하기 - 예시)

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);

2. Flex Dimensions

component style에서 flex 를 사용하면 component가 자동으로 팽창 및 수축할 수 있다. flex: 1 은 '같은 parent내의 공유되는 모든 다른 components들과 채워지는 비율이 동일하다'이다. component. flex에 주어지는 숫자가 커질수록, 같은 parent안의 형제들 중 차지하는 비율이 커진다. 따라서, 아래 코드에서는 powderblue:skyblue:steelblue로 채워지는 비율이 1:2:3이 된다.

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);

**모든 component들은 그것의 부모의 dimensinos가 0보다 클 경우에만 공간을 채우도록 팽창 할 수 있다. 만약에 parent가 fixed width, height, 또는 flex를 지니고 있지 않는다면 parent의 dimensions은 0이 될 것이며 flex children은 보이지 않게 될 것이다.