React-Native入门指南

第4篇React-Native布局实战

  1. 前辈教导我们，掌握一门新技术的最快方法是练习。因此，我找了下比较有爱，暖气的界面。当然不是给美团打广告了，只是觉得页面蛮清新的。下面就是要显示的效果：

美团

  1. 第三篇文章基本上对React-Native的布局基本上有个大致的认识，现在开工吧。总体上，该页面分三个部分：（1）我们约会吧及其右边3栏；（2）1元吃大餐及其底下的4栏；（3）红火来袭的三栏。

一、实现第一部分

  1. 1、首先，我们创建一个项目
  2. 现在我们需要创建一个React-Native的项目，因此可以按照下面的步骤：
  3. 打开终端，开始React-Native开发的旅程吧。
  4. (1)安装命令行工具(已经安装了就不用再安装了)：sudo npm install -g react-native-cli
  5. (2)创建一个空项目：react-native init HelloWorld
  6. (3)找到创建的HelloWorld项目,双击HelloWorld.xcodeproj即可在xcode中打开项目。xcodeproj是xcode的项目文件。
  7. (4)在xcode中，使用快捷键cmd + R即可启动项目。
  9. 2、清除其余多余的代码,剩下的代码如下：
  10. /**
  11. * Sample React Native App
  12. * https://github.com/facebook/react-native
  13. */
  14. 'use strict';
  16. var React = require('react-native');
  17. var {
  18.       AppRegistry,
  19.       StyleSheet,
  20.       Text,
  21.       View,
  22. } = React;
  25. var HelloWorld = React.createClass({
  26.       render: function() {
  27.         return (
  28.               <View></View>
  29.         );
  30.       }
  31. });
  32. var styles = StyleSheet.create({
  34. });
  37. AppRegistry.registerComponent('HelloWorld', () => HelloWorld);
  39. 3、此时，除了闪屏外，看到应该是空白的页面。开工，分析页面：
  40. （1）大致有4个板块
  41. （2）先是左右两栏(1/3和2/3)；后是上下两栏(1/2)。我们先用View组件布局。

美团

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

美团 

  1. 实现效果如下：

美团 

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

美团

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

  1. 完成的效果如下：

美团 

  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>
  51.     </View>
  52.     <View>
  53.       <View style={{borderBottomWidth:1,borderTopWidth:1, borderColor:'#DDD8CE', marginTop:40,height:65, flexDirection: 'row',paddingTop:10}}>
  54.         <View style={[{flex:1}]}>
  55.             <Text style={{fontSize:17, color:'#FF7F60', fontWeight:'900', marginLeft:7}}>一元吃大餐</Text>
  56.             <Text style={{marginLeft:7, fontSize:12, marginTop:3}}>新用户专享</Text>
  57.         </View>
  58.         <View style={{flex:1}}>
  59.             <Image style={{height:50, width:120}} source={{uri:'http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg'}}></Image>
  60.         </View>
  61.       </View>
  62.     </View>
  63.     <View>
  64.       <View style={{flexDirection: 'row',}}>
  65.         <View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1}]}>
  66.           <View style={{flex:1,}}>
  67.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>撸串节狂欢</Text>
  68.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>烧烤6.6元起</Text>
  69.           </View>
  70.           <View style={{flex:1}}>
  71.             <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png'}}></Image>
  72.           </View>
  73.         </View>
  74.         <View style={styles.row}>
  75.           <View style={{flex:1}}>
  76.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>毕业旅行</Text>
  77.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>选好酒店才安心</Text>
  78.           </View>
  79.           <View style={{flex:1}}>
  80.             <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg'}}></Image>
  81.           </View>
  82.         </View>
  83.       </View>
  84.       <View style={{flexDirection: 'row',}}>
  85.         <View style={[styles.row, {borderColor:'#DDD8CE', borderRightWidth:1,  marginLeft:1},]}>
  86.           <View style={{flex:1}}>
  87.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>0元餐来袭</Text>
  88.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>免费吃喝玩乐购</Text>
  89.           </View>
  90.           <View style={{flex:1}}>
  91.             <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png'}}></Image>
  92.           </View>
  93.         </View>
  94.         <View style={styles.row}>
  95.           <View style={{flex:1}}>
  96.             <Text style={{fontSize:17, color:'#EA6644', fontWeight:'bold', marginLeft:7}}>热门团购</Text>
  97.             <Text style={{fontSize:12, color:'#97979A', marginTop:3, marginLeft:7}}>大家都在买什么</Text>
  98.           </View>
  99.           <View style={{flex:1}}>
  100.             <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png'}}></Image>
  101.           </View>
  102.         </View>
  103.       </View>
  104.     </View>
  105.   </View>
  106. );
  107.   }
  108.   });
  111. var styles = StyleSheet.create({
  112.       row:{
  113.     flexDirection: 'row',
  114.     paddingTop:20
  115.   },
  116.   marTop18:{
  117.     marginTop:18,
  118.   },
  119.   marTop14:{
  120.     marginTop:14,
  121.   },
  122.   font14:{
  123.     fontSize:14,
  124.   },
  125.   font10:{
  126.     fontSize:12,
  127.   },
  128.   height160:{
  129.     height: 160
  130.   },
  131.   yue:{
  132.     height:80,
  133.   },
  134.   green:{
  135.     color:'#55A44B',
  136.     fontWeight: '900'
  137.   },
  138.   red:{
  139.     color: '#FF3F0D',
  140.     fontWeight: '900'
  141.   },
  142.   marLeft10:{
  143.     marginLeft:10,
  144.   },
  145.   part_1_left:{
  146.         flex: 1,
  147.     borderColor: '#DCD7CD',
  148.     borderRightWidth: 0.5,
  149.        borderBottomWidth: 1,
  150.   },
  151.   part_1_right:{
  152.     flex:2,
  153.     borderColor: '#DCD7CD',
  154.     borderBottomWidth: 1,
  155.   },
  156.   hanbao:{
  157.     height:55,
  158.     width:55
  159.   }
  160. });
  163. AppRegistry.registerComponent('HelloWorld', () => HelloWorld);