转(4)第4篇React-Native布局实战

前端之家收集整理的这篇文章主要介绍了转(4)第4篇React-Native布局实战前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

React-Native入门指南

第4篇React-Native布局实战

  1. 前辈教导我们,掌握一门新技术的最快方法是练习。因此,我找了下比较有爱,暖气的界面。当然不是给美团打广告了,只是觉得页面蛮清新的。下面就是要显示效果
  1. 第三篇文章基本上对React-Native的布局基本上有个大致的认识,现在开工吧。总体上,该页面分三个部分:(1)我们约会吧及其右边3栏;(21元吃大餐及其底下的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中打开项目。xcodeprojxcode的项目文件
  7. (4)在xcode中,使用快捷键cmd + R即可启动项目。
  8.  
  9. 2、清除其余多余的代码,剩下的代码如下:
  10. /**
  11. * Sample React Native App
  12. * https://github.com/facebook/react-native
  13. */
  14. 'use strict';
  15.  
  16. var React = require('react-native');
  17. var {
  18. AppRegistry,StyleSheet,Text,View,} = React;
  19.  
  20.  
  21. var HelloWorld = React.createClass({
  22. render: function() {
  23. return (
  24. <View></View>
  25. );
  26. }
  27. });
  28. var styles = StyleSheet.create({
  29.  
  30. });
  31.  
  32.  
  33. AppRegistry.registerComponent('HelloWorld',() => HelloWorld);
  34.  
  35. 3、此时,除了闪屏外,看到应该是空白的页面。开工,分析页面
  36. 1)大致有4个板块
  37. 2)先是左右两栏(1/32/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';
  7.  
  8. var React = require('react-native');
  9. var {
  10. AppRegistry,Image,} = React;
  11.  
  12.  
  13. var HelloWorld = React.createClass({
  14. render: function() {
  15. return (
  16. <View style={{}}>
  17. <View style={[styles.height160,styles.row,]}>
  18. <View style={[styles.height160,styles.part_1_left,]}>
  19. <Text style={[styles.font14,styles.marTop18,styles.marLeft10,styles.green]}>我们约吧</Text>
  20. <Text style={[styles.font10,styles.marTop14,styles.marLeft10]}>恋爱家人好朋友</Text>
  21. <Image style={[styles.yue]} source={{uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}}></Image>
  22. </View>
  23. <View style={[styles.height160,styles.part_1_right,]}>
  24. <View style={[styles.row,{flex:1}]}>
  25. <View style={{flex:1}}>
  26. <Text style={[styles.font14,{marginLeft:30},styles.red]}>超低价值</Text>
  27. <Text style={[styles.font14,{fontSize:12,marginTop:14,marginLeft:30,color: 'black'}]}>十元惠生活</Text>
  28. </View>
  29. <View style={[{flex:1},{marginTop:-13}]}>
  30. <Image style={[styles.hanbao]} source={{uri: 'http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg'}}></Image>
  31. </View>
  32. </View>
  33. <View style={[{flex:1,flexDirection: 'row',borderTopWidth:0.5,borderColor:'#DDD8CE'}]}>
  34. <View style={{flex:1,borderRightWidth:1,borderColor:'#DDD8CE',}}>
  35. <Text style={{color:'#F742AB',marginLeft:5,fontWeight:'bold',fontSize:15,marginTop:8}}>聚餐宴请</Text>
  36. <Text style={{fontSize:12,marginTop:4,marginLeft:5}}>朋友家人常聚聚</Text>
  37. <Image style={{height:25,width:25,alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image>
  38. </View>
  39. <View style={{flex:1,}}>
  40. <Text style={[styles.font14,{color:'#FF8601',marginTop:8,marginLeft:5}]}>名店抢购</Text>
  41. <Text style={[{marginLeft:5,fontSize:12,}]}>还有</Text>
  42. <Text style={[{marginLeft:5,}]}>12:06:12分</Text>
  43. </View>
  44. </View>
  45. </View>
  46. </View>
  47. <View>
  48. <View style={{borderBottomWidth:1,borderTopWidth:1,marginTop:40,height:65,paddingTop:10}}>
  49. <View style={[{flex:1}]}>
  50. <Text style={{fontSize:17,color:'#FF7F60',fontWeight:'900',marginLeft:7}}>一元吃大餐</Text>
  51. <Text style={{marginLeft:7,marginTop:3}}>新用户专享</Text>
  52. </View>
  53. <View style={{flex:1}}>
  54. <Image style={{height:50,width:120}} source={{uri:'http://p1.meituan.net/280.0/groupop/7f8208b653aa51d2175848168c28aa0b23269.jpg'}}></Image>
  55. </View>
  56. </View>
  57. </View>
  58. <View>
  59. <View style={{flexDirection: 'row',}}>
  60. <View style={[styles.row,{borderColor:'#DDD8CE',borderRightWidth:1}]}>
  61. <View style={{flex:1,}}>
  62. <Text style={{fontSize:17,color:'#EA6644',marginLeft:7}}>撸串节狂欢</Text>
  63. <Text style={{fontSize:12,color:'#97979A',marginTop:3,marginLeft:7}}>烧烤6.6元起</Text>
  64. </View>
  65. <View style={{flex:1}}>
  66. <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/280.0/groupop/fd8484743cbeb9c751a00e07573c3df319183.png'}}></Image>
  67. </View>
  68. </View>
  69. <View style={styles.row}>
  70. <View style={{flex:1}}>
  71. <Text style={{fontSize:17,marginLeft:7}}>毕业旅行</Text>
  72. <Text style={{fontSize:12,marginLeft:7}}>选好酒店才安心</Text>
  73. </View>
  74. <View style={{flex:1}}>
  75. <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/ba4422451254f23e117dedb4c6c865fc10596.jpg'}}></Image>
  76. </View>
  77. </View>
  78. </View>
  79. <View style={{flexDirection: 'row',marginLeft:1},]}>
  80. <View style={{flex:1}}>
  81. <Text style={{fontSize:17,marginLeft:7}}>0元餐来袭</Text>
  82. <Text style={{fontSize:12,marginLeft:7}}>免费吃喝玩乐购</Text>
  83. </View>
  84. <View style={{flex:1}}>
  85. <Image style={{width:60,height:55}} source={{uri: 'http://p0.meituan.net/280.0/groupop/6bf3e31d75559df76d50b2d18630a7c726908.png'}}></Image>
  86. </View>
  87. </View>
  88. <View style={styles.row}>
  89. <View style={{flex:1}}>
  90. <Text style={{fontSize:17,marginLeft:7}}>热门团购</Text>
  91. <Text style={{fontSize:12,marginLeft:7}}>大家都在买什么</Text>
  92. </View>
  93. <View style={{flex:1}}>
  94. <Image style={{width:60,height:55}} source={{uri: 'http://p1.meituan.net/mmc/a616a48152a895ddb34ca45bd97bbc9d13050.png'}}></Image>
  95. </View>
  96. </View>
  97. </View>
  98. </View>
  99. </View>
  100. );

} });

  1. var styles = StyleSheet.create({
  2. row:{
  3. flexDirection: 'row',paddingTop:20
  4. },marTop18:{
  5. marginTop:18,},marTop14:{
  6. marginTop:14,font14:{
  7. fontSize:14,font10:{
  8. fontSize:12,height160:{
  9. height: 160
  10. },yue:{
  11. height:80,green:{
  12. color:'#55A44B',fontWeight: '900'
  13. },red:{
  14. color: '#FF3F0D',marLeft10:{
  15. marginLeft:10,part_1_left:{
  16. flex: 1,borderColor: '#DCD7CD',borderRightWidth: 0.5,borderBottomWidth: 1,part_1_right:{
  17. flex:2,hanbao:{
  18. height:55,width:55
  19. }
  20. });
  21.  
  22.  
  23. AppRegistry.registerComponent('HelloWorld',() => HelloWorld);

猜你在找的React相关文章