레이아웃 연습 #1

https://g6ling.gitbooks.io/react-native-tutorial-korean/content/1-5ko.html 참조 

광고까지 하면 크게 5개로 나눠 집니다.

NavBar, User, ButtonGroup, Ads, Taps로..  가능하면 Fixed Height를 사용하지 말고, Flex를 사용해서 만들어 보세요..

*** 코드가 길어지니 에러가 나네요..  아래와 같이 만들어 봤습니다.

아래의 코드를 밑의 글의 링크에 카피 & 페이스트로 테스트 해 보세요

[code]

import React, { Component } from 'react';

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

class NavBar extends Component {

  render() {

    return (

      <View style={styles.navbar}>

        <Text style={styles.textColor}>더보기</Text>

      </View>

    )

  }

}

class User extends Component {

  render() {

    return (

      <View style={styles.user}>

      </View>

    )

  }

}

class ButtonGroup extends Component {

  render() {

    return (

      <View style={styles.buttongroup}>

      </View>

    )

  }

}

class Ads extends Component {

  render() {

    return (

      <View style={styles.ads}>

      </View>

    )

  }

}

class Taps extends Component {

  render() {

    return (

      <View style={styles.taps}>

      </View>

    )

  }

}

class gitbookTest extends Component {

  render() {

    return (

      <View style={styles.container}>

        <NavBar />

        <User />

        <ButtonGroup />

        <Ads />

        <Taps />

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    flexDirection: 'column',

    justifyContent: 'space-between'

  },

  navbar: {

    height: 50,

    marginTop: 20,

    alignItems: 'center',

    justifyContent: 'center',

    backgroundColor: 'orangered',

  },

  textColor: {

    color: 'white',

    fontSize: 20

  },

  user: {

    flex: 2,

    backgroundColor: 'darkturquoise'

  },

  buttongroup: {

    marginTop: 40,

    flex: 3,

    backgroundColor: 'lightgreen',

  },

  ads: {

    flex: 1,

    backgroundColor: 'mediumpurple',

  },

  taps: {

    flex: 1,

    backgroundColor: 'blue'

  },

  rightBottom: {

    flex: 2,

    backgroundColor: 'yellow'

  }

});

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

[/code]