Added navigation bar

This commit is contained in:
Jake Howard 2016-02-06 15:07:29 +00:00
parent d95035b779
commit 63acc09656
4 changed files with 129 additions and 1 deletions

View file

@ -1,15 +1,39 @@
import React from 'react-native';
import RouteMaster from './routes/RouteMaster';
import RouteMapper from './navigation/RouteMapper';
const {
Navigator,
StyleSheet,
Platform,
View
} = React;
const styles = StyleSheet.create({
navbar: {
backgroundColor: '#888',
flexDirection:'row',
justifyContent: 'center',
},
container: {
flex: 1,
marginTop: (Platform.OS === 'ios' ? 64 : 56)
}
});
export default class extends React.Component {
renderScene(route, nav) {
const Component = route.component;
const props = route.props || {};
return <route.component nav={nav} {...props}/>;
return (
<View style={styles.container}>
<Component
nav={nav}
currentRoute={props.route}
{...props} />
</View>
);
}
componentWillMount() {
@ -21,6 +45,11 @@ export default class extends React.Component {
<Navigator
renderScene={this.renderScene}
initialRoute={this.initialRoute}
navigationBar={
<Navigator.NavigationBar
style={styles.navbar}
routeMapper={RouteMapper} />
}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;

View file

@ -0,0 +1,40 @@
import React from 'react-native';
var {
StyleSheet,
TouchableHighlight,
View,
Text
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
toolbarButton: {
paddingHorizontal: 10,
},
});
export default class NavigationButton extends React.Component {
_goBack() {
this.props.nav.pop();
}
render() {
if (this.props.nav.getCurrentRoutes().length <= 1) {
return <View />;
}
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.toolbarButton}
underlayColor="#FFF"
onPress={this._goBack.bind(this)}>
<Text>B</Text>
</TouchableHighlight>
</View>
);
}
}

View file

@ -0,0 +1,29 @@
import React from 'react-native'; // eslint-disable-line no-unused-vars
import NavigationTitle from './Title';
import NavigationBackButton from './BackButton';
import { View } from 'react-native';
export default {
LeftButton(route, nav, index, navState) {
return (
<NavigationBackButton nav={nav} direction="left" />
);
},
RightButton(route, nav, index, navState) {
return (
<View />
);
},
Title(route, nav, index, navState) {
return (
<NavigationTitle route={route} />
);
},
};

View file

@ -0,0 +1,30 @@
import React from 'react-native';
var {
StyleSheet,
Text,
View,
} = React;
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
title: {
fontSize: 18,
textAlign: 'center',
color: '#000'
}
});
export default class NavigationTitle extends React.Component {
render() {
const title = this.props.route.title || 'Sphere';
return (
<View style={styles.container}>
<Text style={styles.title}>{ title }</Text>
</View>
);
}
}