React-Native个人信息界面

最近在做一个小练习项目，用户登陆后需要跳转到用户登录信息界面，加班半个小时终于将界面的布局搞定。接触Rect－Native也有一段时间了，以前没有做过ios，只做过android，就布局和开发效率上来说，react－native的给我的感觉是开发效率要大大高于android的。下面是具体的代码：

import React from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'

let {
  StyleSheet,
  View,
  Text,
  Image
} = React

var Temp = React.createClass({
  render: function () {
    return (
      <View style={styles.container}>
        <View style={styles.viewTop}>
          <Text style={styles.txtTitle}>我</Text>
          <Icon name='cog' style={styles.iconSetting} size={20}/>
        </View>
        <View style={styles.viewUser}>
          <View style={styles.viewUserTop}>
            <Image style={styles.imgUserTitle} source={require('../../assets/tx05.png')}/>
          </View>
          <Text style={styles.txtName}>微风zZ</Text>
          <Text style={styles.txtGF}>关注 0   |   粉丝 0</Text>
          <View style={styles.viewEdit}>
            <Icon name='pencil-square-o' style={styles.iconEdit} size={15}/>
            <Text style={styles.txtEdit}>编辑个人资料</Text>
          </View>
        </View>
        <View style={styles.viewLove}>
          <View style={styles.viewLoveTop}>
            <Text style={styles.txtCommon}>我的喜爱 1</Text>
            <Icon style={styles.iconCommon} name='angle-right' size={20}/>
          </View>
          <View style={styles.viewContent}>
            <Image style={styles.imgLove} source={require('../../assets/recommend1.png')}/>
          </View>
        </View>
        <View style={styles.viewCommon}>
          <Text style={styles.txtCommon}>我的点评</Text>
          <Icon style={styles.iconCommon} name='angle-right' size={20}/>
        </View>
        <View style={styles.viewCommon}>
          <Text style={styles.txtCommon}>我参与的标签</Text>
          <Icon style={styles.iconCommon} name='angle-right' size={20}/>
        </View>
      </View>
    )
  }
})

let styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F0F0F0'
  },
  viewTop: {
    height: 60,
    backgroundColor: '#F0F0F0',
    alignItems: 'center',
    borderBottomWidth: 1,
    borderBottomColor: '#B7B7B7',
    flexDirection: 'row'
  },
  txtTitle: {
    flex: 1,
    marginLeft: 10
  },
  iconSetting: {
    marginRight: 10
  },
  viewUser: {
    height: 250,
    backgroundColor: '#F0F0F0'
  },
  viewUserTop: {
    height: 100,
    alignItems: 'center',
    justifyContent: 'center'
  },
  imgUserTitle: {
    height: 80,
     80,
    borderRadius: 40
  },
  txtName: {
    alignSelf: 'center'
  },
  txtGF: {
    alignSelf: 'center',
    marginTop: 40
  },
  viewEdit: {
     150,
    marginTop: 20,
    height: 30,
    flexDirection: 'row',
    alignSelf: 'center',
    backgroundColor: '#E6E6E6',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 10
  },
  txtEdit: {
    marginLeft: 5,
    alignSelf: 'center',
    color: '#7997C7'
  },
  iconEdit: {
    color: '#7997C7',
    marginTop: 5
  },
  viewLove: {
    height: 150,
    borderBottomWidth: 10,
    borderBottomColor: '#F0F0F0',
    backgroundColor: 'ffffff'
  },
  viewLoveTop: {
    height: 40,
    flexDirection: 'row',
    alignItems: 'center'
  },
  txtCommon: {
    marginLeft: 15,
    flex: 1
  },
  iconCommon: {
    marginRight: 10
  },
  imgLove: {
    height: 90,
     90,
    margin: 10,
    marginTop: 0
  },
  viewCommon: {
    height: 50,
    borderBottomWidth: 10,
    borderBottomColor: '#F0F0F0',
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  }
})

module.exports = Temp