import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
} from 'react-native'; class meituan extends Component {
render() {
return ( <View>
<View style={[styles.view_row,styles.height_160]}>
<View style={[styles.height_160,styles.partLeft]}>
<Text style={[styles.marginTextTop_18,styles.grendTextFontSize]}>我们约吧</Text>
<Text style={[styles.marginTextTop_14,styles.textfontSize_10,{textAlign:'center'}]}>恋人家人好朋友</Text>
<Image style={[styles.yueba_height,styles.marginTextTop_14]} source={{uri:'http://ww4.sinaimg.cn/mw690/6b2243e8gw1f71tzeulkpj20f00k00ve.jpg'}}></Image>
</View>
<View style={[styles.height_160,styles.partRgith]}>
<View style={[styles.view_row,{flex:1}]}>
<View style={{flex:1}}>
<Text style={[styles.textfontSize_14,styles.red_font,styles.textfontSize_14,{marginLeft:30}]}>低价超值</Text>
<Text style={[styles.textfontSize_10,styles.textfontSize_14,{marginTop:14,marginLeft:30}]}>十元惠生活</Text>
</View>
<View style={[{flex:1},{marginTop:-10,marginLeft:10}]}>
<Image style={styles.hanbaoImage} source={{uri:'http://ww4.sinaimg.cn/mw690/005Ge4Xjjw1f6nttg4srgj316o1kwhdt.jpg'}}></Image>
</View>
</View>
<View style={{flex:1,flexDirection:'row',borderWidth:0.5,borderColor:'red'}}>
<View style={{flex:1}}>
<Text style={[styles.textfontSize_14,styles.red_font,{marginLeft:10,marginTop:8}]}>聚会邀请</Text>
<Text style={[styles.textfontSize_10,{marginLeft:10,marginTop:8}]}>朋友家人常聚餐</Text>
<Image style={[styles.hongshaorouImage,{alignSelf:'center'}]} source={{uri:'http://ww2.sinaimg.cn/mw690/6b2243e8gw1f79z2o5rakj20qp0snn22.jpg'}}></Image>
</View>
<View style={{flex:1}}>
<Text style={[styles.textfontSize_14,styles.blue_font,{marginLeft:10,marginTop:8}]}>名店抢购</Text>
<Text style={[styles.textfontSize_10,{marginLeft:10,marginTop:8}]}>距离结束</Text>
<Text style={[styles.textfontSize_10,{marginLeft:10,marginTop:8}]}>12:20:30</Text>
</View>
</View>
</View>
</View>
<View>
<View style={{backgroundColor:'#FF00FF',height:8,marginTop:20}}></View>
<View style={{borderWidth:0.5,borderColor:'blue',height:65,flexDirection:'row'}}>
<View style={{flex:1}}>
<Text style={{color:'red',fontSize:18,marginLeft:15,marginTop:10}}>一元吃大餐</Text>
<Text style={{color:'blue',fontSize:12,marginLeft:15,marginTop:10}}>新用户专享</Text>
</View>
<View style={{flex:1}}>
<Image style={{height:50,width:120,marginTop:7.5,alignSelf:'flex-end',marginRight:10}} source={{uri:'http://ww2.sinaimg.cn/mw690/006uhw44gw1f7c4d3as1qj31hc1z4txo.jpg'}}></Image>
</View>
</View> <View>
<View style={{flexDirection:'row',borderBottomWidth:1,borderColor:'red'}}>
<View style={{flex:1,borderColor:'green',borderRightWidth:1,flexDirection:'row'}}>
<View style={{flex:1}}>
<Text style={{fontSize:14,color:'red'}}>撸串节狂欢</Text>
<Text style={{fontSize:12}}>烤串6.6元起</Text>
</View>
<View style={{flex:1}}>
<Image style={styles.hanbaoImage} source={{uri:'http://ww1.sinaimg.cn/mw690/0068LYwcgw1f7bn60viq3j30f00k1mz6.jpg'}}></Image>
</View>
</View> <View style={{flex:1,flexDirection:'row'}}>
<View style={{flex:1}}>
<Text style={{fontSize:14,color:'red'}}>撸串节狂欢</Text>
<Text style={{fontSize:12}}>烤串6.6元起</Text>
</View>
<View style={{flex:1}}>
<Image style={styles.hanbaoImage} source={{uri:'http://ww2.sinaimg.cn/mw690/87a5d32cgw1f79yc94vv7j20ku1127a3.jpg'}}></Image>
</View>
</View> </View> <View style={{flexDirection:'row'}}>
<View style={{flex:1,borderColor:'green',borderRightWidth:1,flexDirection:'row'}}>
<View style={{flex:1}}>
<Text style={{fontSize:14,color:'red'}}>撸串节狂欢</Text>
<Text style={{fontSize:12}}>烤串6.6元起</Text>
</View>
<View style={{flex:1}}>
<Image style={styles.hanbaoImage} source={{uri:'http://ww1.sinaimg.cn/mw690/8d9f2af2gw1f7agt9adphj20ku112x22.jpg'}}></Image>
</View>
</View> <View style={{flex:1,flexDirection:'row'}}>
<View style={{flex:1}}>
<Text style={{fontSize:14,color:'red'}}>撸串节狂欢</Text>
<Text style={{fontSize:12}}>烤串6.6元起</Text>
</View>
<View style={{flex:1}}>
<Image style={styles.hanbaoImage} source={{uri:'http://ww1.sinaimg.cn/mw690/0068acO1jw1f7ajiogif1j30zk172dnu.jpg'}}></Image>
</View>
</View> </View>
</View>
<View style={{backgroundColor:'red',height:10}}></View>
</View>
</View>
);
}
} const styles = StyleSheet.create({
view_row:{
flexDirection:'row',
paddingTop:20,
},
view_column:{
flexDirection:'column',
paddingTop:20,
},
height_160:{
height:160,
},
marginTextTop_18:{
marginTop:18,
},
marginTextTop_14:{
marginTop:14,
},
partLeft:{
flex:1,
borderColor:'red',
borderWidth:1,
},
partRgith:{
flex:2,
borderColor:'red',
borderWidth:1,
},
grendTextFontSize:{
fontSize:14,
color:'#55A44B',
textAlign:'center'
},
red_font:{
color:'red'
},
blue_font:{
color:'blue',
},
textfontSize_10:{
fontSize:10,
},
textfontSize_14:{
fontSize:14,
},
yueba_height:{
height:85,
},
hanbaoImage:{
width:55, height:55,
},
hongshaorouImage:{
width:25, height:25,
} }); AppRegistry.registerComponent('meituan', () => meituan);

  React-Native -课后练习

效果图

仔细不要急 一步一步来

React-Native -课后练习的更多相关文章

  1. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  2. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  3. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  4. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  5. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  6. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  7. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  8. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  9. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  10. React Native初探

    前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...

随机推荐

  1. Burp Suite使用详解一

    本文由阿德马翻译自国外网站,请尊重劳动成果,转载注明出处 Burp Suite是Web应用程序测试的最佳工具之一,其多种功能可以帮我们执行各种任务.请求的拦截和修改,扫描web应用程序漏洞,以暴力破解 ...

  2. django test

    django的单元测试 官方文档:https://docs.djangoproject.com/en/dev/topics/testing/ 相对于自己封装urllib/urllib2/request ...

  3. office 365 Sharepoint 2013

    平台环境: office 365 Sharepoint  2013 操作文件和文件夹 访问文档库的最佳方式是借助在 /_api/web 处可用的 GetFolderByServerRelativeUr ...

  4. raspbian调整分辨率

    参考 https://www.raspberrypi.org/documentation/configuration/config-txt.md 设置示例,设置成800*600 tvservice - ...

  5. QT特供 CGAL配置流程(基于QT5+VS2015)

    最近做的QT项目涉及计算几何库,需要用到CGAL,其配置着实麻烦,而且相互关联的软件也存在版本兼容一类的问题,在这里就对其配置流程做一些整理说明,以便后来者能够少些烦恼.(注:以下使用Win10作说明 ...

  6. js创建命名空间

    CreateNameSpace: function () { var nameSpaceObjec = arguments[0].split('.'); var currentNameSpaceNam ...

  7. JS中获得当前时间的年月

    //获取完整的日期 var date=new Date; var year=date.getFullYear(); var month=date.getMonth()+1; month =(month ...

  8. AngularJs学习

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. Azure Site to Site VPN 配置手册

    目录 1    Azure Site to Site VPN配置前的准备    1 1.1    设备兼容    1 1.2    网络要求和注意事项    1 2    配置Azure site t ...

  10. 怎样用conda安装opencv

    首先用Anaconda是因为方便(管理方便,包安装真心不方便).下面是我的安装过程: 首先使用如下命令安装opencv conda install -c https://conda.binstar.o ...