RN flexbox - 2

저번편에 이어서 flexbox에 대해 공부를 해보자.

이걸 만들어 보자.

일단 최대한 답을 보지 말고 생각을 해보도록하자.

위의 navBar부분과 아까 했던 부분이 위 아래로 나뉘어져 있다. 위의 부분은 Text가 들어가 있고, 아래부분은 아까했던 부분이 들어가 있다.

class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.navBar}>
          <Text>
            NavBar
          </Text>
        </View>
        <View style={styles.body}>
          <View style={styles.left}>
          </View>
          <View style={styles.right}>
            <View style={styles.rightTop}>
            </View>
            <View style={styles.rightBottom}>
            </View>
          </View>
        </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  navBar: {
    height: 60,
    backgroundColor: '#B0B0B0',
  },
  body: {
    flex: 1,
    flexDirection: 'row',
  },
  left: {
    flex: 1,
    backgroundColor: 'red'
  },
  right: {
    flex: 2,
    flexDirection: 'column',
  },
  rightTop: {
    flex: 1,
    backgroundColor: 'blue'
  },
  rightBottom: {
    flex: 2,
    backgroundColor: 'yellow'
  }

});

이걸 실행 해보도록 하자. 그러면 되긴 되는데 Text가 가운데가 아니라 왼쪽위에 있다. 이걸 가운데 정렬을 해야한다. 그 전편에 있던 글 중에서 영어로 된 css-trick을 다시한번 읽어 보자. 무엇을 쓰는지 알았다면 RN flexbox docs 전편에 있던 document을 읽어서 사용하려고 한 속성이 있는지 확인. 그 속성을 사용하자.

힌트: justifyContent 와 alignItems을 사용한다. 이 속성을 잘 모르면 꼭 전편의 링크들을 읽어보길 바란다.

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.navBar}>
          <Text>
            NavBar
          </Text>
        </View>
        <View style={styles.body}>
          <View style={styles.left}>
          </View>
          <View style={styles.right}>
            <View style={styles.rightTop}>
            </View>
            <View style={styles.rightBottom}>
            </View>
          </View>
        </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  navBar: {
    height: 60,
    backgroundColor: '#B0B0B0',
    justifyContent: 'center',
    alignItems: 'center',
  },
  body: {
    flex: 1,
    flexDirection: 'row',
  },
  left: {
    flex: 1,
    backgroundColor: 'red'
  },
  right: {
    flex: 2,
    flexDirection: 'column',
  },
  rightTop: {
    flex: 1,
    backgroundColor: 'blue'
  },
  rightBottom: {
    flex: 2,
    backgroundColor: 'yellow'
  }

});

AppRegistry.registerComponent('gitbookTest', () => gitbookTest);

이걸 실행하면 우리가 원한 레이아웃이 그려진다.

나는 여기서 navBar에 height값을 주었다. 이 경우 화면의 크기가 변해도 navBar의 높이는 항상 고정이고, body 부분의 크기만 변하게 된다. flexbox는 고정크기와 상대크기 를 모두 사용할 수 있고, 상대 크기는 고정크기를 전부 사용하고 남은 부분들로 사용하게 된다. 전편의 첫번째 링크를 읽으면 알수 잇을 것이다.

다음편 에서는 이제 flexbox와 컴포넌트를 사용하는 연습을 좀 더 해보도록 하자.