Skip to content

Commit

Permalink
Navigation.js update to ES6
Browse files Browse the repository at this point in the history
  • Loading branch information
@crazycodeboy
crazycodeboy committed Aug 10, 2016
1 parent 0510b61 commit 46ac1c8
Show file tree
Hide file tree
Showing 2 changed files with 123 additions and 118 deletions.
3 changes: 1 addition & 2 deletions app/AboutPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
View,
} from 'react-native'
import NavigationBar from './NavigationBar'
class AboutPage extends Component {
export default class AboutPage extends Component {
render() {
var navigationBar = Platform.OS === "android" ?
<NavigationBar
Expand Down Expand Up @@ -104,4 +104,3 @@ const styles = StyleSheet.create({
color: 'dodgerblue', fontSize: 13, textDecorationLine: 'underline'
},
})
module.exports = AboutPage
238 changes: 122 additions & 116 deletions app/NavigationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,124 +2,130 @@
* NavigationBar
* @flow
*/
import React, { Component } from 'react';
import React, {Component} from 'react';

import {
StyleSheet,
Navigator,
Platform,
TouchableOpacity,
Image,
Text,
View
} from 'react-native'
var NavigationBar=React.createClass({
propTypes: {
navigator:React.PropTypes.object,
leftButtonTitle: React.PropTypes.string,
leftButtonIcon: Image.propTypes.source,
popEnabled:React.PropTypes.bool,
onLeftButtonClick: React.PropTypes.func,
title:React.PropTypes.string,
rightButtonTitle: React.PropTypes.string,
rightButtonIcon:Image.propTypes.source,
onRightButtonClick:React.PropTypes.func
},
getDefaultProps() {
return {
title: '',
popEnabled:true
};
},
import {
StyleSheet,
Navigator,
Platform,
TouchableOpacity,
Image,
Text,
View
} from 'react-native'
export default class NavigationBar extends Component {
static propTypes = {
navigator: React.PropTypes.object,
leftButtonTitle: React.PropTypes.string,
leftButtonIcon: Image.propTypes.source,
popEnabled: React.PropTypes.bool,
onLeftButtonClick: React.PropTypes.func,
title: React.PropTypes.string,
rightButtonTitle: React.PropTypes.string,
rightButtonIcon: Image.propTypes.source,
onRightButtonClick: React.PropTypes.func
}

leftView(){
// if (!(this.props.leftButtonTitle||this.props.leftButtonIcon)) return;
var leftButtonTitle=this.props.leftButtonTitle?
<Text style={styles.title}>{this.props.leftButtonTitle}</Text>:null;
var leftButtonIcon=this.props.leftButtonIcon?
<Image
style={{width:26,height:26}}
source={this.props.leftButtonIcon}/>:null;
constructor(propos) {
super(propos);
this.state = {
title: '',
popEnabled: true
};
}

return(
<TouchableOpacity
onPress={this.onLeftButtonClick}>
<View style={{width: 50, alignItems: 'center',flex:1,justifyContent:'center'}}>
{leftButtonTitle}
{leftButtonIcon}
</View>
</TouchableOpacity>
)
},
onLeftButtonClick(){
if (this.props.navigator&&this.props.popEnabled)this.props.navigator.pop();
if(this.props.onLeftButtonClick)this.props.onLeftButtonClick();
},
rightView(){
var rightButtonTitle=this.props.rightButtonTitle;
var rightButtonIcon=this.props.rightButtonIcon;
// if (!(rightButtonTitle||rightButtonIcon)) return;
var titleView=this.props.rightButtonTitle?
<Text style={styles.title}>{this.props.rightButtonTitle}</Text>:null;
return(
<TouchableOpacity
onPress={this.onRightButtonClick}>
<View style={styles.button}>
{titleView}
<Image
style={{width:26,height:26}}
source={rightButtonIcon}/>
</View>
</TouchableOpacity>
)
},
onRightButtonClick(){
if(this.props.onRightButtonClick)this.props.onRightButtonClick();
},
render:function() {
var stateBar=Platform.OS==='ios'?
<View style={{height:20}}/>:null;
return(
<View style={styles.container}>
{stateBar}
<View style={styles.navBar}>
{this.leftView()}
<View style={styles.titleLayout}>
<Text style={styles.title}>{this.props.title}</Text>
</View>
{this.rightView()}
</View>
</View>
)
}
})
leftView() {
// if (!(this.props.leftButtonTitle||this.props.leftButtonIcon)) return;
var leftButtonTitle = this.props.leftButtonTitle ?
<Text style={styles.title}>{this.props.leftButtonTitle}</Text> : null;
var leftButtonIcon = this.props.leftButtonIcon ?
<Image
style={{width: 26, height: 26}}
source={this.props.leftButtonIcon}/> : null;

return (
<TouchableOpacity
onPress={()=>this.onLeftButtonClick()}>
<View style={{width: 50, alignItems: 'center', flex: 1, justifyContent: 'center'}}>
{leftButtonTitle}
{leftButtonIcon}
</View>
</TouchableOpacity>
)
}

onLeftButtonClick() {
if (this.props.navigator && this.props.popEnabled)this.props.navigator.pop();
if (this.props.onLeftButtonClick)this.props.onLeftButtonClick();
}

rightView() {
var rightButtonTitle = this.props.rightButtonTitle;
var rightButtonIcon = this.props.rightButtonIcon;
// if (!(rightButtonTitle||rightButtonIcon)) return;
var titleView = this.props.rightButtonTitle ?
<Text style={styles.title}>{this.props.rightButtonTitle}</Text> : null;
return (
<TouchableOpacity
onPress={()=>this.onRightButtonClick()}>
<View style={styles.button}>
{titleView}
<Image
style={{width: 26, height: 26}}
source={rightButtonIcon}/>
</View>
</TouchableOpacity>
)
}

onRightButtonClick() {
if (this.props.onRightButtonClick)this.props.onRightButtonClick();
}

render() {
var stateBar = Platform.OS === 'ios' ?
<View style={{height: 20}}/> : null;
return (
<View style={styles.container}>
{stateBar}
<View style={styles.navBar}>
{this.leftView()}
<View style={styles.titleLayout}>
<Text style={styles.title}>{this.props.title}</Text>
</View>
{this.rightView()}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#4caf50',
},
navBar:{
flexDirection:'row',
alignItems: 'center',
justifyContent:'space-between',
// backgroundColor: 'red',
height:44,
// shadowOffset:{
// width: 1,
// height: 0.5,
// },
// shadowColor: '#55ACEE',
// shadowOpacity: 0.8,
},
titleLayout:{
flex:1,alignItems:'center'
},
title: {
fontSize:18, color: '#FFFFFF', fontWeight: '400',
// backgroundColor:'blue',
},
button: {
width: 50, alignItems: 'center'
// backgroundColor:'red'
},
container: {
backgroundColor: '#4caf50',
},
navBar: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
// backgroundColor: 'red',
height: 44,
// shadowOffset:{
// width: 1,
// height: 0.5,
// },
// shadowColor: '#55ACEE',
// shadowOpacity: 0.8,
},
titleLayout: {
flex: 1, alignItems: 'center'
},
title: {
fontSize: 18, color: '#FFFFFF', fontWeight: '400',
// backgroundColor:'blue',
},
button: {
width: 50, alignItems: 'center'
// backgroundColor:'red'
},
})
module.exports=NavigationBar
module.exports = NavigationBar

0 comments on commit 46ac1c8

Please sign in to comment.