React Native #3. Layout with flexbox

React Native #3. Layout with flexbox

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

flexDirection 

• layout의 primary axis(주요 축)을 정의를 한다.

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

justifyContent 

• primary axis (주요 축)과 함께 자식 요소의 distribution(분배) 방식을 결정을 한다.
• 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

• secondary axis (2번쨰 축)의 alignment를 결정을 한다.
• primary axis가 row이면 secondary axis는 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);