ReactNative flexBox 연습1

해당레이아웃을 만드는 연습을 해보았다. 

 
class FlexBox1 extends Component {
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.left}>
                </View>
                <View style={styles.right}>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1,
       backgroundColor : 'blue'
   }
});
 

세로로 2등분으로 되게끔 레이아웃을 나누어보았다. 

Blue 영역을 컬럼기준으로 1/2 나눠야 되므로 View 영역을 right 를 기준으로 자식 앨리먼트를 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.left}>
                </View>
                <View style={styles.right}>
                    <View style={styles.rightTop}>
                    </View>
                    <View style={styles.rightBottom}>
                    </View>
                </View>
            </View>
        );
    }
 
}
 
 
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   }
});
 
export default FlexBox1;

참조 : 리액트 네이티브 튜토리얼 (리얼한빛)