Added navigation bar
This commit is contained in:
parent
d95035b779
commit
63acc09656
4 changed files with 129 additions and 1 deletions
|
@ -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;
|
||||
|
|
40
app/components/navigation/BackButton.js
Normal file
40
app/components/navigation/BackButton.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
29
app/components/navigation/RouteMapper.js
Normal file
29
app/components/navigation/RouteMapper.js
Normal 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} />
|
||||
);
|
||||
},
|
||||
|
||||
};
|
30
app/components/navigation/Title.js
Normal file
30
app/components/navigation/Title.js
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
Reference in a new issue