ReactNative flexBox 연습2

NavBar 헤더를추가해보자.

기존의 Container영역을 기준으로 헤더영역과 바디 영역으로 나눌 수 있다. 

import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
class FlexBox1 extends Component {
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.navBar}>
                </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'
   },
   body : {
    flex : 1,
    flexDirection : 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   },navBar : {
        flex : 1,       
    //    height : 60,
       backgroundColor : 'gray'
   }
});
export default FlexBox1;

여기서 주요하게 봐야될것들은 container, body ,right에 flexDirecton 설정이다.  Container 기준으로 NavBar ,body는 column 기준으로 정렬되어야 된다.

body를 기준으로 왼쪽 (red), 오른쪽 (blue, yellow) row방향으로 정렬되어있다.

right기준으로 blue, yellow column 방향으로 정렬되어야 된다.

    navBar : {

               

       height : 60,

       backgroundColor : 'gray'

   }

navBar flex 속성을 삭제하고 , height 값을 60으로 준다. 

Text속성을 입력하면 navBar 글자가 왼쪽정렬이 된다. align-items는 부모 컨테이너를 기준으로 항목의 가로 정렬을 제어한다. align-items center 정렬로 한다.

세로정렬을 하기위해서 , justify-content 속성을 center 준다.

left 빨간영역이 줄어들어야되므로 right flex 값을 2로 조정한다.

import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
 
 
class FlexBox1 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'
   },
   body : {
    flex : 1,
    flexDirection : 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 2 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   },navBar : {
        //flex : 1,       
        height : 60,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor : 'gray'
   }
});
 
export default FlexBox1;

참초 : freecodecamp.org

            한빛미디어 리엑트 네이티브 듀토리얼