Skip to content

Commit 46ac1c8

Browse files
crazycodeboycrazycodeboy
committed
Navigation.js update to ES6
1 parent 0510b61 commit 46ac1c8

File tree

2 files changed

+123
-118
lines changed

2 files changed

+123
-118
lines changed

‎app/AboutPage.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import {
1515
View,
1616
} from 'react-native'
1717
import NavigationBar from './NavigationBar'
18-
class AboutPage extends Component {
18+
export default class AboutPage extends Component {
1919
render() {
2020
var navigationBar = Platform.OS === "android" ?
2121
<NavigationBar
@@ -104,4 +104,3 @@ const styles = StyleSheet.create({
104104
color: 'dodgerblue', fontSize: 13, textDecorationLine: 'underline'
105105
},
106106
})
107-
module.exports = AboutPage

‎app/NavigationBar.js

+122-116
Original file line numberDiff line numberDiff line change
@@ -2,124 +2,130 @@
22
* NavigationBar
33
* @flow
44
*/
5-
import React, { Component } from 'react';
5+
import React, {Component} from 'react';
66

7-
import {
8-
StyleSheet,
9-
Navigator,
10-
Platform,
11-
TouchableOpacity,
12-
Image,
13-
Text,
14-
View
15-
} from 'react-native'
16-
var NavigationBar=React.createClass({
17-
propTypes: {
18-
navigator:React.PropTypes.object,
19-
leftButtonTitle: React.PropTypes.string,
20-
leftButtonIcon: Image.propTypes.source,
21-
popEnabled:React.PropTypes.bool,
22-
onLeftButtonClick: React.PropTypes.func,
23-
title:React.PropTypes.string,
24-
rightButtonTitle: React.PropTypes.string,
25-
rightButtonIcon:Image.propTypes.source,
26-
onRightButtonClick:React.PropTypes.func
27-
},
28-
getDefaultProps() {
29-
return {
30-
title: '',
31-
popEnabled:true
32-
};
33-
},
7+
import {
8+
StyleSheet,
9+
Navigator,
10+
Platform,
11+
TouchableOpacity,
12+
Image,
13+
Text,
14+
View
15+
} from 'react-native'
16+
export default class NavigationBar extends Component {
17+
static propTypes = {
18+
navigator: React.PropTypes.object,
19+
leftButtonTitle: React.PropTypes.string,
20+
leftButtonIcon: Image.propTypes.source,
21+
popEnabled: React.PropTypes.bool,
22+
onLeftButtonClick: React.PropTypes.func,
23+
title: React.PropTypes.string,
24+
rightButtonTitle: React.PropTypes.string,
25+
rightButtonIcon: Image.propTypes.source,
26+
onRightButtonClick: React.PropTypes.func
27+
}
3428

35-
leftView(){
36-
// if (!(this.props.leftButtonTitle||this.props.leftButtonIcon)) return;
37-
var leftButtonTitle=this.props.leftButtonTitle?
38-
<Text style={styles.title}>{this.props.leftButtonTitle}</Text>:null;
39-
var leftButtonIcon=this.props.leftButtonIcon?
40-
<Image
41-
style={{width:26,height:26}}
42-
source={this.props.leftButtonIcon}/>:null;
29+
constructor(propos) {
30+
super(propos);
31+
this.state = {
32+
title: '',
33+
popEnabled: true
34+
};
35+
}
4336

44-
return(
45-
<TouchableOpacity
46-
onPress={this.onLeftButtonClick}>
47-
<View style={{width: 50, alignItems: 'center',flex:1,justifyContent:'center'}}>
48-
{leftButtonTitle}
49-
{leftButtonIcon}
50-
</View>
51-
</TouchableOpacity>
52-
)
53-
},
54-
onLeftButtonClick(){
55-
if (this.props.navigator&&this.props.popEnabled)this.props.navigator.pop();
56-
if(this.props.onLeftButtonClick)this.props.onLeftButtonClick();
57-
},
58-
rightView(){
59-
var rightButtonTitle=this.props.rightButtonTitle;
60-
var rightButtonIcon=this.props.rightButtonIcon;
61-
// if (!(rightButtonTitle||rightButtonIcon)) return;
62-
var titleView=this.props.rightButtonTitle?
63-
<Text style={styles.title}>{this.props.rightButtonTitle}</Text>:null;
64-
return(
65-
<TouchableOpacity
66-
onPress={this.onRightButtonClick}>
67-
<View style={styles.button}>
68-
{titleView}
69-
<Image
70-
style={{width:26,height:26}}
71-
source={rightButtonIcon}/>
72-
</View>
73-
</TouchableOpacity>
74-
)
75-
},
76-
onRightButtonClick(){
77-
if(this.props.onRightButtonClick)this.props.onRightButtonClick();
78-
},
79-
render:function() {
80-
var stateBar=Platform.OS==='ios'?
81-
<View style={{height:20}}/>:null;
82-
return(
83-
<View style={styles.container}>
84-
{stateBar}
85-
<View style={styles.navBar}>
86-
{this.leftView()}
87-
<View style={styles.titleLayout}>
88-
<Text style={styles.title}>{this.props.title}</Text>
89-
</View>
90-
{this.rightView()}
91-
</View>
92-
</View>
93-
)
94-
}
95-
})
37+
leftView() {
38+
// if (!(this.props.leftButtonTitle||this.props.leftButtonIcon)) return;
39+
var leftButtonTitle = this.props.leftButtonTitle ?
40+
<Text style={styles.title}>{this.props.leftButtonTitle}</Text> : null;
41+
var leftButtonIcon = this.props.leftButtonIcon ?
42+
<Image
43+
style={{width: 26, height: 26}}
44+
source={this.props.leftButtonIcon}/> : null;
45+
46+
return (
47+
<TouchableOpacity
48+
onPress={()=>this.onLeftButtonClick()}>
49+
<View style={{width: 50, alignItems: 'center', flex: 1, justifyContent: 'center'}}>
50+
{leftButtonTitle}
51+
{leftButtonIcon}
52+
</View>
53+
</TouchableOpacity>
54+
)
55+
}
56+
57+
onLeftButtonClick() {
58+
if (this.props.navigator && this.props.popEnabled)this.props.navigator.pop();
59+
if (this.props.onLeftButtonClick)this.props.onLeftButtonClick();
60+
}
61+
62+
rightView() {
63+
var rightButtonTitle = this.props.rightButtonTitle;
64+
var rightButtonIcon = this.props.rightButtonIcon;
65+
// if (!(rightButtonTitle||rightButtonIcon)) return;
66+
var titleView = this.props.rightButtonTitle ?
67+
<Text style={styles.title}>{this.props.rightButtonTitle}</Text> : null;
68+
return (
69+
<TouchableOpacity
70+
onPress={()=>this.onRightButtonClick()}>
71+
<View style={styles.button}>
72+
{titleView}
73+
<Image
74+
style={{width: 26, height: 26}}
75+
source={rightButtonIcon}/>
76+
</View>
77+
</TouchableOpacity>
78+
)
79+
}
80+
81+
onRightButtonClick() {
82+
if (this.props.onRightButtonClick)this.props.onRightButtonClick();
83+
}
84+
85+
render() {
86+
var stateBar = Platform.OS === 'ios' ?
87+
<View style={{height: 20}}/> : null;
88+
return (
89+
<View style={styles.container}>
90+
{stateBar}
91+
<View style={styles.navBar}>
92+
{this.leftView()}
93+
<View style={styles.titleLayout}>
94+
<Text style={styles.title}>{this.props.title}</Text>
95+
</View>
96+
{this.rightView()}
97+
</View>
98+
</View>
99+
)
100+
}
101+
}
96102
const styles = StyleSheet.create({
97-
container: {
98-
backgroundColor: '#4caf50',
99-
},
100-
navBar:{
101-
flexDirection:'row',
102-
alignItems: 'center',
103-
justifyContent:'space-between',
104-
// backgroundColor: 'red',
105-
height:44,
106-
// shadowOffset:{
107-
// width: 1,
108-
// height: 0.5,
109-
// },
110-
// shadowColor: '#55ACEE',
111-
// shadowOpacity: 0.8,
112-
},
113-
titleLayout:{
114-
flex:1,alignItems:'center'
115-
},
116-
title: {
117-
fontSize:18, color: '#FFFFFF', fontWeight: '400',
118-
// backgroundColor:'blue',
119-
},
120-
button: {
121-
width: 50, alignItems: 'center'
122-
// backgroundColor:'red'
123-
},
103+
container: {
104+
backgroundColor: '#4caf50',
105+
},
106+
navBar: {
107+
flexDirection: 'row',
108+
alignItems: 'center',
109+
justifyContent: 'space-between',
110+
// backgroundColor: 'red',
111+
height: 44,
112+
// shadowOffset:{
113+
// width: 1,
114+
// height: 0.5,
115+
// },
116+
// shadowColor: '#55ACEE',
117+
// shadowOpacity: 0.8,
118+
},
119+
titleLayout: {
120+
flex: 1, alignItems: 'center'
121+
},
122+
title: {
123+
fontSize: 18, color: '#FFFFFF', fontWeight: '400',
124+
// backgroundColor:'blue',
125+
},
126+
button: {
127+
width: 50, alignItems: 'center'
128+
// backgroundColor:'red'
129+
},
124130
})
125-
module.exports=NavigationBar
131+
module.exports = NavigationBar

0 commit comments

Comments
 (0)