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

웹 플레이어에서는 멀티플 파일지원이 안되기 때문에.. 하나의 파일로 만들어서 테스트 해 봅니다.

컴퍼넌트를 별도의 파일로 자르는 것은 위의에 설명이 나오니 쉽게 할 수 있습니다.

View와 Text 와 style만을 사용해서 아래와 같이 만들어 봤습니다.

고정을 사용한 곳은 margin정도만 사용을 했습니다.  아이폰 7과 7 Plus등 화면 사이즈가 다른 제품에서도 비슷한 모양으로 보여질려고 한다면,  많은 부분이 flexbox를 사용해 봐야 될 것 같습니다.  

시간되시면 만들어 보세요.

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 style={{flex:2, flexDirection: 'row', margin: 3, backgroundColor: 'antiquewhite', justifyContent: 'space-around'}}>

          <View style={{flex:1, margin: 3, backgroundColor: 'aqua'}}>

            <View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 80}}>

            </View>

          </View>

          <View style={{flex:3, flexDirection: 'column', margin: 3, backgroundColor: 'aqua', justifyContent: 'flex-start'}}>

            <Text style={{ fontSize: 20, fontWeight: 'bold'}}>은애악</Text>

            <Text>강철 / g6lingp</Text>

            <Text>서울대 16학번</Text>

          </View>

        </View>

        <View style={{ flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'bisque', justifyContent: 'space-around'}}>

          <View style={{flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'aqua', justifyContent: 'space-between', }}>

            <View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 20}}>

            </View>

            <View style={{flex:2, justifyContent: 'center', backgroundColor: 'white', margin: 3}}>

              <Text style={{paddingLeft: 5}}>내가 쓴 글</Text>

            </View>

          </View>

          <View style={{flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'aqua', justifyContent: 'space-around'}}>

            <View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 20}}>

            </View>

            <View style={{flex:2, justifyContent: 'center', backgroundColor: 'white', margin: 3}}>

              <Text style={{paddingLeft: 5}}>댓글 단 글</Text>

            </View>

          </View>

          <View style={{flex:1, flexDirection: 'row', margin: 3, backgroundColor: 'aqua', justifyContent: 'space-between'}}>

            <View style={{flex:1, backgroundColor: 'grey', margin: 2, minWidth: 20}}>

            </View>

              <View style={{flex:2, justifyContent: 'center', backgroundColor: 'white', margin: 3}}>

                <Text style={{paddingLeft: 5}}>스크랩</Text>

              </View>

          </View>

        </View>

      </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);