Skip to content

Commit 3e88825

Browse files
lh_wanglh_wang
lh_wang
authored and
lh_wang
committed
add code of 4 page
1 parent e5f193e commit 3e88825

File tree

3 files changed

+485
-0
lines changed

3 files changed

+485
-0
lines changed

‎code/第4篇布局实战（一）代码/index.ios.js

+160
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
/**
2+
* Sample React Native App
3+
* https://github.com/facebook/react-native
4+
*/
5+
'use strict';
6+
7+
var React = require('react-native');
8+
var {
9+
AppRegistry,
10+
StyleSheet,
11+
Text,
12+
View,
13+
Image,
14+
} = React;
15+
16+
17+
var HelloWorld = React.createClass({
18+
render: function() {
19+
return (
20+
<View style={{}}>
21+
<View style={[styles.height160, styles.row,]}>
22+
<View style={[styles.height160, styles.part_1_left,]}>
23+
<Text style={[styles.font14, styles.marTop18, styles.marLeft10, styles.green]}>我们约吧</Text>
24+
<Text style={[styles.font10, styles.marTop14, styles.marLeft10]}>恋爱家人好朋友</Text>
25+
<Image style={[styles.yue]} source={{uri: 'http://p0.meituan.net/mmc/fe4d2e89827aa829e12e2557ded363a112289.png'}}></Image>
26+
</View>
27+
<View style={[styles.height160, styles.part_1_right,]}>
28+
<View style={[styles.row, {flex:1}]}>
29+
<View style={{flex:1}}>
30+
<Text style={[styles.font14, {marginLeft:30}, styles.red]}>超低价值</Text>
31+
<Text style={[styles.font14, {fontSize:12, marginTop:14, marginLeft:30,color: 'black'}]}>十元惠生活</Text>
32+
</View>
33+
<View style={[{flex:1}, {marginTop:-13}]}>
34+
<Image style={[styles.hanbao]} source={{uri: 'http://p0.meituan.net/mmc/a06d0c5c0a972e784345b2d648b034ec9710.jpg'}}></Image>
35+
</View>
36+
</View>
37+
<View style={[{flex:1, flexDirection: 'row',borderTopWidth:0.5, borderColor:'#DDD8CE'}]}>
38+
<View style={{flex:1, borderRightWidth:1, borderColor:'#DDD8CE',}}>
39+
<Text style={{color:'#F742AB', marginLeft:5,fontWeight:'bold', fontSize:15, marginTop:8}}>聚餐宴请</Text>
40+
<Text style={{fontSize:12,marginTop:4, marginLeft:5}}>朋友家人常聚聚</Text>
41+
<Image style={{height:25,width:25, alignSelf: 'center'}} source={{uri: 'http://p1.meituan.net/mmc/08615b8ae15d03c44cc5eb9bda381cb212714.png'}}></Image>
42+
</View>
43+
<View style={{flex:1,}}>
44+
<Text style={[styles.font14,{color:'#FF8601', marginTop:8, marginLeft:5}]}>名店抢购</Text>
45+
<Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>还有</Text>
46+
<Text style={[{marginLeft:5, fontSize:12,marginTop:4,}]}>12:06:12分</Text>
47+
</View>
48+
</View>
49+
</View>
50+
</View>
51+
<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+
);
106+
}
107+
});
108+
var styles = StyleSheet.create({
109+
row:{
110+
flexDirection: 'row',
111+
paddingTop:20
112+
},
113+
marTop18:{
114+
marginTop:18,
115+
},
116+
marTop14:{
117+
marginTop:14,
118+
},
119+
font14:{
120+
fontSize:14,
121+
},
122+
font10:{
123+
fontSize:12,
124+
},
125+
height160:{
126+
height: 160
127+
},
128+
yue:{
129+
height:80,
130+
},
131+
green:{
132+
color:'#55A44B',
133+
fontWeight: '900'
134+
},
135+
red:{
136+
color: '#FF3F0D',
137+
fontWeight: '900'
138+
},
139+
marLeft10:{
140+
marginLeft:10,
141+
},
142+
part_1_left:{
143+
flex: 1,
144+
borderColor: '#DCD7CD',
145+
borderRightWidth: 0.5,
146+
borderBottomWidth: 1,
147+
},
148+
part_1_right:{
149+
flex:2,
150+
borderColor: '#DCD7CD',
151+
borderBottomWidth: 1,
152+
},
153+
hanbao:{
154+
height:55,
155+
width:55
156+
}
157+
});
158+
159+
160+
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

‎code/第4篇布局实战（二）代码/index.ios.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
2+
3+
var React = require('react-native');
4+
var Index = require('./pages/Index');
5+
6+
var {
7+
NavigatorIOS,
8+
AppRegistry,
9+
StyleSheet,
10+
} = React;
11+
12+
var NV = React.createClass({
13+
render: function(){
14+
return(
15+
<NavigatorIOS
16+
style={styles.container}
17+
initialRoute={{
18+
title: '首页',
19+
component: Index,
20+
}}
21+
/>
22+
);
23+
}
24+
});
25+
26+
var styles = StyleSheet.create({
27+
container: {
28+
flex: 1,
29+
}
30+
});
31+
32+
33+
AppRegistry.registerComponent('HelloWorld', () => NV);

0 commit comments

Comments
 (0)