Skip to content

Commit 00b53cf

Browse files
weianziweianzi
committed
下拉刷新
1 parent ba922a0 commit 00b53cf

5 files changed

+126
-45
lines changed

‎index.ios.js

+112-36
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,120 @@
11
/**
22
* IOS 入口文件
33
*/
4-
'use strict';
4+
'use strict';
5+
var React = require('react-native');
6+
var MainTabBar = require('./MainTabBar.react');
7+
var StoryList = require('./views/StoryList.react');
8+
var StoryDetail = require('./views/StoryDetail.react');
9+
var {
10+
AppRegistry,
11+
Navigator,
12+
StyleSheet,
13+
Text,
14+
View,
15+
Image,
16+
StatusBarIOS,
17+
TouchableOpacity,
18+
} = React;
519

6-
var React = require('react-native');
7-
var { AppRegistry, Navigator, StyleSheet, View } = React;
8-
var StoryList = require('./views/StoryList.react');
9-
var StoryDetail = require('./views/StoryDetail.react');
20+
//StatusBarIOS.setStyle('light-content');
1021

11-
var RouteMapper = function(route, navigationOperations, onComponentRef) {
12-
switch(route.name){
13-
case 'storyList':
14-
return (
15-
<StoryList navigator={navigationOperations} />
16-
);
17-
case 'storyDetail':
18-
return (
19-
<StoryDetail navigator={navigationOperations} detailId={route.detailId} />
20-
);
21-
}
22-
};
22+
var NavigationBarRouteMapper = {
23+
LeftButton: function(route, navigator, index, navState) {
24+
if (index === 0) {
25+
return null;
26+
}
27+
return (
28+
<TouchableOpacity
29+
onPress={() => navigator.pop()}
30+
style={styles.navBarLeftButton}>
31+
<Image
32+
source={require('./images/icon-back.imageset/icon-back.png')}
33+
style={styles.navBarLeftIcon} />
34+
</TouchableOpacity>
35+
);
36+
},
37+
RightButton: function(route, navigator, index, navState) {
38+
return (
39+
<View style={styles.rightBtnView}></View>
40+
);
41+
},
42+
Title: function(route, navigator, index, navState) {
43+
if(!route.title){
44+
return (
45+
<Text style={[styles.navBarText]}>
46+
我的WebApp
47+
</Text>
48+
)
49+
}
50+
return (
51+
<Text style={[styles.navBarText]}>
52+
{route.title.length>16 ? route.title.substring(0, 16) + '...' : route.title}
53+
</Text>
54+
);
55+
},
56+
};
57+
var RouteMapper = function(route, navigator) {
58+
switch(route.name){
59+
case 'storyList':
60+
return (
61+
<StoryList navigator={navigator} />
62+
);
63+
case 'storyDetail':
64+
return (
65+
<StoryDetail
66+
navigator={navigator}
67+
detailId={route.detailId} />
68+
);
69+
default:
70+
return (
71+
<MainTabBar navigator={navigator} />
72+
);
73+
}
74+
};
2375

24-
var ReactNativeWeb = React.createClass({
25-
render: function(){
26-
var initialRoute = {name: 'storyList'};
27-
return (
28-
<Navigator
29-
style={styles.container}
30-
initialRoute={initialRoute}
31-
renderScene={RouteMapper}
32-
/>
33-
);
34-
}
35-
});
76+
var ReactNativeWeb = React.createClass({
77+
render: function(){
78+
var initialRoute = {name: 'MainTabBar'};
79+
return (
80+
<Navigator
81+
style={styles.container}
82+
initialRoute={initialRoute}
83+
renderScene={RouteMapper}
84+
navigationBar={
85+
<Navigator.NavigationBar
86+
routeMapper={NavigationBarRouteMapper}
87+
style={styles.navBar}
88+
/>
89+
}
90+
/>
91+
);
92+
}
93+
});
3694

37-
var styles = StyleSheet.create({
38-
container: {
39-
flex: 1,
40-
backgroundColor: 'white',
41-
},
42-
});
95+
var styles = StyleSheet.create({
96+
container: {
97+
backgroundColor:'#333',
98+
//height: 44,
99+
paddingTop: 20,
100+
},
101+
navBar: {
102+
backgroundColor: '#333',
103+
height: 44,
104+
},
105+
navBarText: {
106+
fontSize: 14,
107+
color: '#fff',
108+
},
109+
navBarLeftButton: {
110+
paddingLeft: 10,
111+
},
112+
navBarLeftIcon:{
113+
height:22,
114+
},
115+
rightBtnView:{
116+
},
117+
});
43118

44-
AppRegistry.registerComponent('ReactNativeWeb', () => ReactNativeWeb);
119+
120+
AppRegistry.registerComponent('ReactNativeWeb', () => ReactNativeWeb);

‎index.web.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ var {
1212
StyleSheet,
1313
Text,
1414
View,
15+
Image,
1516
TouchableOpacity,
1617
} = React;
1718

@@ -24,8 +25,9 @@ var NavigationBarRouteMapper = {
2425
<TouchableOpacity
2526
onPress={() => navigator.pop()}
2627
style={styles.navBarLeftButton}>
27-
<Text style={[styles.navBarText, styles.navBarButtonText]}>返回
28-
</Text>
28+
<Image
29+
source={{uri:'./images/icon-back.imageset/[email protected]'}}
30+
style={styles.navBarLeftIcon} />
2931
</TouchableOpacity>
3032
);
3133
},
@@ -44,7 +46,7 @@ var NavigationBarRouteMapper = {
4446
}
4547
return (
4648
<Text style={[styles.navBarText, styles.navBarTitleText]}>
47-
{route.title}
49+
{route.title.length>16 ? route.title.substring(0, 16) + '...' : route.title}
4850
</Text>
4951
);
5052
},
@@ -100,13 +102,15 @@ var styles = StyleSheet.create({
100102
fontSize: 16
101103
},
102104
navBarTitleText: {
103-
//marginTop:-10,
104105
color: '#fff',
105106
},
106107
navBarLeftButton: {
107108
color: '#fff',
108109
paddingLeft: 10,
109-
//marginTop:-10,
110+
},
111+
navBarLeftIcon:{
112+
height:32,
113+
width:22,
110114
},
111115
});
112116

‎views/Member.react.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@ module.exports = React.createClass({
2626

2727
var styles = StyleSheet.create({
2828
container: {
29-
flex: 1,
30-
marginTop:44,
29+
flex: 1,
30+
marginTop: Platform.OS =='web' ? 44 : 24,
3131
marginBottom:44,
3232
backgroundColor:'#f8f8f8',
3333
justifyContent:'center',

‎views/StoryDetail.react.js

+1
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ var styles = StyleSheet.create({
7979
},
8080
webView:{
8181
flex:1,
82+
marginTop:Platform.OS =='web' ? 44 : 24,
8283
},
8384
});
8485

‎views/StoryList.react.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -177,8 +177,8 @@ module.exports = React.createClass({
177177
var styles = StyleSheet.create({
178178
listView:{
179179
flex: 1,
180-
marginTop:44,
181-
marginBottom:44,
180+
marginTop: Platform.OS =='web' ? 44 : 24,
181+
marginBottom: 44,
182182
backgroundColor:'#f8f8f8',
183183
},
184184
itemView:{

0 commit comments

Comments
 (0)