Height and Width

화면 위에서 컴포넌트에 가로 세로 사이즈를 결정하는 방법에 대해서 설명하도록 하겠습니다.

 

제일 먼저 고정적으로 'width' or 'height'을 설정을 하는 방법이 있습니다.

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

export default function FixedDimensionsBasics() {
    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>
    );
}

Flex Dimensions

컴포넌트에 flex를 사용을 해서 동적으로 확장 및 비율에 따라서 정할수가 있습니다.

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

export default function FlexDimensionsBasics() {
    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>
    );
}