React Native 공부 8 - Layout with Flexbox

React Native - Layout with Flexbox

component들은 flexbox 알고리즘을 사용하여 그들의 자손들의 layout을 구체화시킬 수 있다.

Flex Direction 

component's style 은layout의 주축을 설정한다. default 는 column 이고 row, column중 하나를 선택 할 수 있다.

import React, { Component } from 'react';

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

export default 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>

    );

  }

};

// skip this line if using Create React Native App

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

Justify Content

component의 style에 justifyContent를 설정하면 주축에서의 분배를 설정할 수 있다. 

flex-start, center, flex-end, space-around, space-between, space-evenly 옵션이 있다.

import React, { Component } from 'react';

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

export default 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>

    );

  }

};

// skip this line if using Create React Native App

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

Align Items

alignItems는 secondary axis를 결정한다. 만약 primary axis가 row라면, secondary column은 column이 된다.

옵션에는 flex-start, center, flex-end, stretch가 있다.

import React, { Component } from 'react';

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

export default 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: 'stretch',

      }}>

        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

        <View style={{height: 50, backgroundColor: 'skyblue'}} />

        <View style={{height: 100, backgroundColor: 'steelblue'}} />

      </View>

    );

  }

};

// skip this line if using Create React Native App

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

** stretch 효과를 위해서는 children은 fixed dimension을 지니고 있으면 안된다. width:50 이 있는한, alignItems: stretch는 아무 효과가 없다.