React-native Personal Information interface

Recently in a small exercise project, users need to jump to the user login information interface, half an hour of overtime to finally the layout of the interface. Contact Rect-native also has a period of time, previously did not do iOS, only done Android, on the layout and development efficiency, react-native to my feeling is the development efficiency is much higher than Android. Here is the specific code:

1Import React from ' react-native '2Import Icon from ' React-native-vector-icons/fontawesome '3 4 Let {5 StyleSheet,6 View,7 Text,8 Image9} =ReactTen  One varTemp =React.createclass ({ ARenderfunction () { -     return ( -<view style={styles.container}> the<view style={styles.viewtop}> -<text style={styles.txttitle}> Me </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 ')}/> A</View> at<text Style={styles.txtname}> Breeze Zz</text> -<text style={styles.txtgf}> Attention 0 | Fan 0</text> -<view style={styles.viewedit}> -<icon name= ' Pencil-square-o ' Style={styles.iconedit} size={15}/> -<text style={styles.txtedit}> Edit Profile </Text> -</View> in</View> -<view style={styles.viewlove}> to<view style={styles.viewlovetop}> +<text style={styles.txtcommon}> my favorite 1</text>. -<icon Style={styles.iconcommon} name= ' Angle-right ' size={20}/> the</View> *<view style={styles.viewcontent}> $<image Style={styles.imglove} source={require ('.. /.. /assets/recommend1.png ')}/>Panax Notoginseng</View> -</View> the<view style={styles.viewcommon}> +<text style={styles.txtcommon}> my reviews </Text> A<icon Style={styles.iconcommon} name= ' Angle-right ' size={20}/> the</View> +<view style={styles.viewcommon}> -<text style={styles.txtcommon}> I am involved in the label </Text> $<icon Style={styles.iconcommon} name= ' Angle-right ' size={20}/> $</View> -</View> -     ) the   } - })Wuyi  theLet styles =stylesheet.create ({ - container: { WuFlex:1, -BackgroundColor: ' #F0F0F0 ' About   }, $ viewtop: { -Height:60, -BackgroundColor: ' #F0F0F0 ', -Alignitems: ' Center ', ABorderbottomwidth:1, +borderBottomColor: ' #B7B7B7 ', theFlexdirection: ' Row ' -   }, $ Txttitle: { theFlex:1, theMarginleft:10 the   }, the iconsetting: { -Marginright:10 in   }, the Viewuser: { theheight:250, AboutBackgroundColor: ' #F0F0F0 ' the   }, the viewusertop: { theheight:100, +Alignitems: ' Center ', -Justifycontent: ' Center ' the   },Bayi Imgusertitle: { theHeight:80, theWidth:80, -Borderradius:40 -   }, the txtname: { theAlignself: ' Center ' the   }, the TXTGF: { -Alignself: ' Center ', theMargintop:40 the   }, the viewedit: {94width:150, theMargintop:20, theHeight:30, theFlexdirection: ' Row ',98Alignself: ' Center ', AboutBackgroundColor: ' #E6E6E6 ', -Justifycontent: ' Center ',101Alignitems: ' Center ',102Borderradius:10103   },104 Txtedit: { theMarginleft:5,106Alignself: ' Center ',107Color: ' #7997C7 '108   },109 Iconedit: { theColor: ' #7997C7 ',111Margintop:5 the   },113 Viewlove: { theheight:150, theBorderbottomwidth:10, theborderBottomColor: ' #F0F0F0 ',117BackgroundColor: ' FFFFFF '118   },119 viewlovetop: { -Height:40,121Flexdirection: ' Row ',122Alignitems: ' Center '123   },124 Txtcommon: { theMarginleft:15,126Flex:1127   }, - Iconcommon: {129Marginright:10 the   },131 Imglove: { theHeight:90,133Width:90,134Margin:10,135margintop:0136   },137 Viewcommon: {138Height:50,139Borderbottomwidth:10, $borderBottomColor: ' #F0F0F0 ',141Flexdirection: ' Row ',142Alignitems: ' Center ',143BackgroundColor: ' #ffffff '144   }145 })146 147Module.exports = Temp

React-native Personal Information interface