Skip to content

Commit 2d71b50

Browse files
crazycodeboycrazycodeboy
committed
index.ios.js update to ES6
1 parent 9959ffe commit 2d71b50

File tree

4 files changed

+136
-128
lines changed

4 files changed

+136
-128
lines changed

‎.flowconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -96,4 +96,4 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(2[0-7]\\|1[0-9]\\|[0-9
9696
suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
9797

9898
[version]
99-
^0.29.0
99+
^0.30.0

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
bundles/
2+
13
# OSX
24
#
35
.DS_Store

‎index.ios.js

+130-127
Original file line numberDiff line numberDiff line change
@@ -3,139 +3,142 @@
33
* @flow
44
*/
55

6-
import React, { Component } from 'react';
6+
import React, {Component} from 'react';
77

88
import {
9-
AppRegistry,
10-
StyleSheet,
11-
Navigator,
12-
Platform,
13-
TouchableOpacity,
14-
Text,
15-
TabBarIOS,
16-
View
9+
AppRegistry,
10+
StyleSheet,
11+
Navigator,
12+
Platform,
13+
TouchableOpacity,
14+
Text,
15+
TabBarIOS,
16+
View
1717
} from 'react-native'
18-
import ScrollableTabView, { ScrollableTabBar, } from 'react-native-scrollable-tab-view'
19-
var AboutPage=require('./app/AboutPage')
20-
var PopularPage=require('./app/PopularPage')
21-
var FavoritePage=require('./app/FavoritePage')
22-
var NavigationBar=require('./app/NavigationBar')
18+
import ScrollableTabView, {ScrollableTabBar} from 'react-native-scrollable-tab-view'
19+
import AboutPage from './app/AboutPage'
20+
import PopularPage from './app/PopularPage'
21+
import FavoritePage from './app/FavoritePage'
22+
import NavigationBar from './app/NavigationBar'
2323
var updateFavorite;
24-
var GitHubPopular=React.createClass({
25-
getInitialState: function() {
26-
return {
27-
selectedTab: 'popularTab',
28-
};
29-
},
30-
componentDidMount:function(){
31-
console.log('');
32-
},
33-
onSelected:function(object:string) {
34-
if(this.updateFavorite&&'popularTab'===object)this.updateFavorite(object);
35-
this.setState({
36-
selectedTab:object,
37-
})
38-
},
39-
_renderScene(route, navigator) {
40-
let Component = route.component;
41-
return (
42-
<Component {...route.params} navigator={navigator} />
43-
);
44-
},
45-
_navigator(defaultComponent,defaultName){
46-
return (
47-
<Navigator
48-
ref={'nav'+defaultName}
49-
style={styles.container}
50-
initialRoute={{
51-
name: 'Popular',
52-
component:defaultComponent
53-
}}
54-
renderScene={this._renderScene}
55-
//sceneStyle={{paddingTop: (Platform.OS === 'android' ? 66 : 64)}}
56-
//navigationBar={this._renderNavBar(defaultName)}
57-
/>
58-
)
59-
},
60-
_popularNavigator(){
61-
var component=
62-
<View style={{flex:1}}>
63-
<NavigationBar
64-
title='Popular'/>
65-
<ScrollableTabView
66-
style={{paddingBottom:50}}
67-
tabBarUnderlineColor='#4caf50'
68-
tabBarInactiveTextColor='gray'
69-
tabBarActiveTextColor='#4caf50'
70-
ref="scrollableTabView"
71-
initialPage={0}
72-
renderTabBar={() => <ScrollableTabBar underlineHeight={2}/>}
73-
>
74-
<PopularPage tabLabel='ALL' homeComponent={this}/>
75-
<PopularPage tabLabel='iOS' homeComponent={this}/>
76-
<PopularPage tabLabel='Android' homeComponent={this}/>
77-
<PopularPage tabLabel='JavaScript' homeComponent={this}/>
78-
<PopularPage tabLabel='Java' homeComponent={this}/>
79-
<PopularPage tabLabel='Go' homeComponent={this}/>
80-
<PopularPage tabLabel='CSS' homeComponent={this}/>
81-
<PopularPage tabLabel='Object-c' homeComponent={this}/>
82-
<PopularPage tabLabel='Python' homeComponent={this}/>
83-
<PopularPage tabLabel='Swift' homeComponent={this}/>
84-
<PopularPage tabLabel='HTML' homeComponent={this}/>
85-
</ScrollableTabView>
86-
</View>
87-
return this._navigator(()=>component, 'Popular');
88-
},
89-
_tbItem(title,icon,selectedTab,navigator){
90-
return(
91-
<TabBarIOS.Item
92-
title={title}
93-
icon={icon}
94-
selectedIcon={icon}
95-
selected={this.state.selectedTab === selectedTab}
96-
onPress={()=>this.onSelected(selectedTab)}
97-
>
98-
{navigator}
99-
</TabBarIOS.Item>
100-
)
101-
},
102-
render:function() {
103-
return (
104-
<TabBarIOS
105-
tintColor="#4caf50"
106-
unselectedTintColor="lightslategray"
107-
barTintColor="ghostwhite">
108-
{this._tbItem('Popular', require('./res/images/ic_whatshot_black_36dp.png'), 'popularTab', this._popularNavigator())}
109-
{this._tbItem('Favorite', require('./res/images/ic_favorite_black_36dp.png'), 'favoriteTab', this._navigator(FavoritePage,'Favorite'))}
110-
{this._tbItem('About', require('./res/images/ic_hdr_weak_black_36dp.png'), 'aboutTab', this._navigator(AboutPage,'About'))}
111-
</TabBarIOS>
112-
);
113-
}
114-
})
24+
class GitHubPopular extends Component {
25+
constructor(props) {
26+
super(props);
27+
this.state = {
28+
selectedTab: 'popularTab',
29+
};
30+
}
31+
onSelected(object) {
32+
if (this.updateFavorite && 'popularTab' === object)this.updateFavorite(object);
33+
this.setState({
34+
selectedTab: object,
35+
})
36+
}
37+
38+
_renderScene(route, navigator) {
39+
let Component = route.component;
40+
return (
41+
<Component {...route.params} navigator={navigator}/>
42+
);
43+
}
44+
45+
_navigator(defaultComponent, defaultName) {
46+
return (
47+
<Navigator
48+
ref={'nav' + defaultName}
49+
style={styles.container}
50+
initialRoute={{
51+
name: 'Popular',
52+
component: defaultComponent
53+
}}
54+
renderScene={this._renderScene}
55+
//sceneStyle={{paddingTop: (Platform.OS === 'android' ? 66 : 64)}}
56+
//navigationBar={this._renderNavBar(defaultName)}
57+
/>
58+
)
59+
}
60+
61+
_popularNavigator() {
62+
var component =
63+
<View style={{flex: 1}}>
64+
<NavigationBar
65+
title='Popular'/>
66+
<ScrollableTabView
67+
style={{paddingBottom: 50}}
68+
tabBarUnderlineColor='#4caf50'
69+
tabBarInactiveTextColor='gray'
70+
tabBarActiveTextColor='#4caf50'
71+
ref="scrollableTabView"
72+
initialPage={0}
73+
renderTabBar={() => <ScrollableTabBar underlineHeight={2}/>}
74+
>
75+
<PopularPage tabLabel='ALL' homeComponent={this}/>
76+
<PopularPage tabLabel='iOS' homeComponent={this}/>
77+
<PopularPage tabLabel='Android' homeComponent={this}/>
78+
<PopularPage tabLabel='JavaScript' homeComponent={this}/>
79+
<PopularPage tabLabel='Java' homeComponent={this}/>
80+
<PopularPage tabLabel='Go' homeComponent={this}/>
81+
<PopularPage tabLabel='CSS' homeComponent={this}/>
82+
<PopularPage tabLabel='Object-c' homeComponent={this}/>
83+
<PopularPage tabLabel='Python' homeComponent={this}/>
84+
<PopularPage tabLabel='Swift' homeComponent={this}/>
85+
<PopularPage tabLabel='HTML' homeComponent={this}/>
86+
</ScrollableTabView>
87+
</View>
88+
return this._navigator(()=>component, 'Popular');
89+
}
90+
91+
_tbItem(title, icon, selectedTab, navigator) {
92+
return (
93+
<TabBarIOS.Item
94+
title={title}
95+
icon={icon}
96+
selectedIcon={icon}
97+
selected={this.state.selectedTab === selectedTab}
98+
onPress={()=>this.onSelected(selectedTab)}
99+
>
100+
{navigator}
101+
</TabBarIOS.Item>
102+
)
103+
}
104+
105+
render() {
106+
return (
107+
<TabBarIOS
108+
tintColor="#4caf50"
109+
unselectedTintColor="lightslategray"
110+
barTintColor="ghostwhite">
111+
{this._tbItem('Popular', require('./res/images/ic_whatshot_black_36dp.png'), 'popularTab', this._popularNavigator())}
112+
{this._tbItem('Favorite', require('./res/images/ic_favorite_black_36dp.png'), 'favoriteTab', this._navigator(FavoritePage, 'Favorite'))}
113+
{this._tbItem('About', require('./res/images/ic_hdr_weak_black_36dp.png'), 'aboutTab', this._navigator(AboutPage, 'About'))}
114+
</TabBarIOS>
115+
);
116+
}
117+
}
115118
const styles = StyleSheet.create({
116-
container: {
117-
flex: 1,
118-
backgroundColor: '#F5FCFF',
119-
},
120-
navBar:{
121-
alignItems: 'center',
122-
backgroundColor: '#4caf50',
123-
shadowOffset:{
124-
width: 1,
125-
height: 0.5,
119+
container: {
120+
flex: 1,
121+
backgroundColor: '#F5FCFF',
122+
},
123+
navBar: {
124+
alignItems: 'center',
125+
backgroundColor: '#4caf50',
126+
shadowOffset: {
127+
width: 1,
128+
height: 0.5,
129+
},
130+
shadowColor: '#55ACEE',
131+
shadowOpacity: 0.8,
132+
},
133+
title: {
134+
flex: 1, alignItems: 'center', justifyContent: 'center'
135+
},
136+
button: {
137+
flex: 1, width: 50, alignItems: 'center', justifyContent: 'center'
126138
},
127-
shadowColor: '#55ACEE',
128-
shadowOpacity: 0.8,
129-
},
130-
title: {
131-
flex: 1, alignItems: 'center', justifyContent: 'center'
132-
},
133-
button: {
134-
flex: 1, width: 50, alignItems: 'center', justifyContent: 'center'
135-
},
136-
buttonText: {
137-
fontSize: 18, color: '#FFFFFF', fontWeight: '400'
138-
}
139+
buttonText: {
140+
fontSize: 18, color: '#FFFFFF', fontWeight: '400'
141+
}
139142
})
140143

141144
AppRegistry.registerComponent('GitHubPopular', () => GitHubPopular);

‎package.json

+3
Original file line numberDiff line numberDiff line change
@@ -9,5 +9,8 @@
99
"react": "15.2.1",
1010
"react-native": "0.29.1",
1111
"react-native-scrollable-tab-view": "^0.5.1"
12+
},
13+
"devDependencies": {
14+
"babel-cli": "^6.11.4"
1215
}
1316
}

0 commit comments

Comments
 (0)