React-Native -课后练习
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 -课后练习的更多相关文章
- React Native 之 Text的使用
前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...
- React Native环境配置之Windows版本搭建
接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- 【腾讯Bugly干货分享】React Native项目实战总结
本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...
- React Native环境搭建以及几个基础控件的使用
之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...
- React Native组件介绍
1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...
- React Native图片控件的使用
首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...
- react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置
参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
- React Native初探
前言 很久之前就想研究React Native了,但是一直没有落地的机会,我一直认为一个技术要有落地的场景才有研究的意义,刚好最近迎来了新的APP,在可控的范围内,我们可以在上面做任何想做的事情. P ...
随机推荐
- Burp Suite使用详解一
本文由阿德马翻译自国外网站,请尊重劳动成果,转载注明出处 Burp Suite是Web应用程序测试的最佳工具之一,其多种功能可以帮我们执行各种任务.请求的拦截和修改,扫描web应用程序漏洞,以暴力破解 ...
- django test
django的单元测试 官方文档:https://docs.djangoproject.com/en/dev/topics/testing/ 相对于自己封装urllib/urllib2/request ...
- office 365 Sharepoint 2013
平台环境: office 365 Sharepoint 2013 操作文件和文件夹 访问文档库的最佳方式是借助在 /_api/web 处可用的 GetFolderByServerRelativeUr ...
- raspbian调整分辨率
参考 https://www.raspberrypi.org/documentation/configuration/config-txt.md 设置示例,设置成800*600 tvservice - ...
- QT特供 CGAL配置流程(基于QT5+VS2015)
最近做的QT项目涉及计算几何库,需要用到CGAL,其配置着实麻烦,而且相互关联的软件也存在版本兼容一类的问题,在这里就对其配置流程做一些整理说明,以便后来者能够少些烦恼.(注:以下使用Win10作说明 ...
- js创建命名空间
CreateNameSpace: function () { var nameSpaceObjec = arguments[0].split('.'); var currentNameSpaceNam ...
- JS中获得当前时间的年月
//获取完整的日期 var date=new Date; var year=date.getFullYear(); var month=date.getMonth()+1; month =(month ...
- AngularJs学习
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Azure Site to Site VPN 配置手册
目录 1 Azure Site to Site VPN配置前的准备 1 1.1 设备兼容 1 1.2 网络要求和注意事项 1 2 配置Azure site t ...
- 怎样用conda安装opencv
首先用Anaconda是因为方便(管理方便,包安装真心不方便).下面是我的安装过程: 首先使用如下命令安装opencv conda install -c https://conda.binstar.o ...