HybridApp-React Native 2세대 (Layout)

<최종  화면> flex를 이용하여 여러가지 배치를 연습해본다.

---

예제는 D드라이브에 HybridApp\ReactNative폴더에 예제 폴더를 만들어서 작업할 것이다.

해당 경로까지 접근하여 init하자.

명령어가 잘 실행되었다면 RN04Layoyt폴더가 생겼을 것이다.

배치를 연습하기 위해 네모를 만들어 보자.

cmd창에서 만들어진 폴더까지 접속하여 run을 하자.

네모 두개를 추가 배치해보자. 배치에 대해서 스타일을 주지 않더라도 기본으로 flex-direction은 column이다 (수직배치)

비율로 배치를 해보자. 우선 flex:숫자를 쓰면 flex-gorws만 준 값이다.  (월래 세개의 값을 줄 수 있다. flex:)

배치를 수평으로 바꿔보자.

중첩 구조를 연습해보자.

index.js

/**
 * @format
 */
 
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import MainComponent from './MainComponent';
 
AppRegistry.registerComponent(appName, () => MainComponent);
 

MainComponent.js

import React, {Component} from 'react';
import {View} from 'react-native';
 
export default class MainComponent extends Component{
    render(){
        return(
            // 여러개의 뷰를 배치하려먼 가장 큰 뷰가 필요함. return은 1개만 가능함.
            // 기본 flex스타일 이며 기본적으로 flex-direction은 column(세로)방향
            // 크기값의 숫자의 기본단위 : dp, [숫자, %] 또는 flex를 통해서 지정가능
            // <View>
            //     <View style={{width:50,height:50, backgroundColor: 'red'}}></View>
            //     <View style={{width:100,height:100, backgroundColor: 'green'}}></View>
            //     <View style={{width:'70%',height:150, backgroundColor: 'blue'}}></View>
            // </View>
 
            
            // justifyContent : 배치 방향과 같은 축의 정렬 
            // alignItems 속성 :배치방향과 교차축의 정렬
            // <View style={{flex:1, flexDirection:'row', justifyContent:'space-evenly',alignItems:'center'}}>
               
            //     {/* 자식뷰들의 너비와 높이지정 */}
            //     {/* 세로배치일때 flex:1은 높이로 됨 */}
            //     <View style={{width:50,height:50, backgroundColor:'red'}}></View>     
            //     <View style={{width:100,height:100, backgroundColor:'green'}}></View>
            //     <View style={{width:150,height:150, backgroundColor:'blue'}}></View>
            // </View>
 
            // <View style={{flex:1, flexDirection:'column'}}>
            //     <View style={{height:50, backgroundColor:'red'}}></View>
 
            //      {/* 남은 공간을 1:2로 배치 */}
            //     <View style={{flex:1, backgroundColor:'green'}}></View>
            //     <View style={{flex:2, backgroundColor:'blue'}}></View>
 
            // </View>
 
            //중첩구조
            <View style={{flex:1, flexDirection:'column'}}>
                {/* 크게 세로 2분할 1:2 */}
               <View style={{flex:1, flexDirection:'row'}}>
                  
                   {/* 좌우분할 1:2 */}
                   <View style={{flex:1, backgroundColor:'red'}}></View>
 
                   <View style={{flex:2, flexDirection:'column'}}>
                      <View style={{flex:1, backgroundColor:'yellow'}}></View>
                       <View style={{flex:1, backgroundColor:'green'}}></View>
                   </View>
                    {/* 절대 위치 뷰 겹치기 */}
                    <View style={{width:50,height:50, backgroundColor:'white',position:'absolute', left:10,top:10}}></View>
                    <View style={{width:50,height:50, backgroundColor:'gray',position:'absolute', left:20,top:20}}></View>
               </View>
              
               <View style={{flex:2, flexDirection:'row'}}>
                  
                  {/* 좌우분할 1:2 */}
                <View style={{flex:2, flexDirection:'column'}}>
                     <View style={{flex:1, backgroundColor:'yellow'}}></View>
                      <View style={{flex:1, backgroundColor:'green'}}></View>
                </View>
                    <View style={{flex:1, backgroundColor:'blue'}}></View>
                  
              </View>
              <View style={{width:100, height:100, backgroundColor:'orange',borderRadius:50, bottom:100, right:90,position:'absolute'}}></View>
            </View>
        );
 
    }
}