React-Native入门指南

    一、实现第一部分

    1. 4、完成初步布局
    2. 看如下代码，应该很清楚了，View里面嵌入并列的两栏。

    美团 

    1. 5、添加内部图片和文字
    2. 其实做这种布局，还是有很多的细节，粗糙的效果如下,这块代码暂时不贴了，最后一并贴出来：

    二、按照第一部分原理，完成整个页面

    1. 整个代码如下：
    2. /**
    3.  * Sample React Native App
    4.  * https://github.com/facebook/react-native
    5.  */
    6. 'use strict';
    8. var React = require('react-native');
    9. var {
    10.       AppRegistry,
    11.       StyleSheet,
    12.       Text,
    13.       View,
    14.       Image,
    15. } = React;
    18. var HelloWorld = React.createClass({
    19.       render: function() {
    20.         return (
    21.               <View style={{}}>
    22.                 <View style={[styles.height160, styles.row,]}>
    23.                 <View style={[styles.height160, styles.part_1_left,]}>
    24.                   <Text style={[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}>我们约吧</Text>
    25.                   <Text style={[styles.font10, styles.marTop14, styles.marLeft10]}>恋爱家人好朋友</Text>
    26.                   <Image style={[styles.yue]} source={{uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}}></Image>
    27.             </View>
    28.             <View style={[styles.height160, styles.part_1_right,]}>
    29.               <View style={[styles.row, {flex:1}]}>
    30.             <View style={{flex:1}}>
    31.               <Text style={[styles.font14, {marginLeft:30}, styles.red]}>超低价值</Text>
    32.               <Text style={[styles.font14, {fontSize:12, marginTop:14, marginLeft:30,color: 'black'}]}>十元惠生活</Text>
    33.             </View>
    34.             <View style={[{flex:1}, {marginTop:-13}]}>
    35.               <Image style={[styles.hanbao]} source={{uri: 'http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg'}}></Image>
    36.             </View>
    37.           </View>
    38.           <View style={[{flex:1, flexDirection: 'row',borderTopWidth:0.5, borderColor:'#DDD8CE'}]}>
    39.             <View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE',}}>
    40.                 <Text style={{color:'#F742AB', marginLeft:5,fontWeight:'bold', fontSize:15, marginTop:8}}>聚餐宴请</Text>
    41.                 <Text style={{fontSize:12,marginTop:4, marginLeft:5}}>朋友家人常聚聚</Text>
    42.                 <Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image>
    43.             </View>
    44.             <View style={{flex:1,}}>
    45.                 <Text style={[styles.font14,{color:'#FF8601', marginTop:8, marginLeft:5}]}>名店抢购</Text>
    46.                 <Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>还有</Text>
    47.                 <Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>12:06:12分</Text>
    48.             </View>
    49.         </View>
    50.     </View>
    52.       <View style={{borderBottomWidth:1,borderTopWidth:1, borderColor:'#DDD8CE', marginTop:40,height:65, flexDirection: 'row',paddingTop:10}}>
    53.         <View style={[{flex:1}]}>
    54.             <Text style={{fontSize:17, color:'#FF7F60', fontWeight:'900', marginLeft:7}}>一元吃大餐</Text>
    55.             <Text style={{marginLeft:7, fontSize:12, marginTop:3}}>新用户专享</Text>
    56.         </View>
    57.         <View style={{flex:1}}>
    58.             <Image style={{height:50, width:120}} source={{uri:'http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg'}}></Image>
    59.         </View>
    60.       </View>
    61.     </View>
    62.     <View>
    63.       <View style={{flexDirection: 'row',}}>
    64.         <View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1}]}>
    65.           <View style={{flex:1,}}>
    66.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>撸串节狂欢</Text>
    67.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>烧烤6.6元起</Text>
    68.           </View>
    69.           <View style={{flex:1}}>
    70.             <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png'}}></Image>
    71.           </View>
    72.         </View>
    73.         <View style={styles.row}>
    74.           <View style={{flex:1}}>
    75.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>毕业旅行</Text>
    76.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>选好酒店才安心</Text>
    77.           </View>
    78.           <View style={{flex:1}}>
    79.             <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg'}}></Image>
    80.           </View>
    81.         </View>
    82.       </View>
    83.       <View style={{flexDirection: 'row',}}>
    84.         <View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1,  marginLeft:1},]}>
    85.           <View style={{flex:1}}>
    86.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>0元餐来袭</Text>
    87.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>免费吃喝玩乐购</Text>
    88.           </View>
    89.           <View style={{flex:1}}>
    90.             <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png'}}></Image>
    91.           </View>
    92.         </View>
    93.         <View style={styles.row}>
    94.           <View style={{flex:1}}>
    95.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>热门团购</Text>
    96.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>大家都在买什么</Text>
    97.           </View>
    98.           <View style={{flex:1}}>
    99.             <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png'}}></Image>
    100.           </View>
    101.         </View>
    102.       </View>
    103.     </View>
    104.   </View>
    105.   }
    109. var styles = StyleSheet.create({
    110.       row:{
    111.     flexDirection: 'row',
    112.     paddingTop:20
    113.   },
    114.   marTop18:{
    115.     marginTop:18,
    116.   },
    117.   marTop14:{
    118.     marginTop:14,
    119.   },
    120.   font14:{
    121.     fontSize:14,
    122.   },
    123.   font10:{
    124.     fontSize:12,
    125.   },
    126.   height160:{
    127.     height: 160
    128.   },
    129.   yue:{
    130.     height:80,
    131.   },
    132.   green:{
    133.     color:'#55A44B',
    134.     fontWeight: '900'
    135.   },
    136.   red:{
    137.     color: '#FF3F0D',
    138.     fontWeight: '900'
    139.   },
    140.   marLeft10:{
    141.     marginLeft:10,
    142.   },
    143.   part_1_left:{
    144.         flex: 1,
    145.     borderColor: '#DCD7CD',
    146.     borderRightWidth: 0.5,
    147.        borderBottomWidth: 1,
    148.   },
    149.   part_1_right:{
    150.     flex:2,
    151.     borderColor: '#DCD7CD',
    152.     borderBottomWidth: 1,
    153.   },
    154.   hanbao:{
    155.     height:55,
    156.     width:55
    157.   }
    158. });