diff --git a/app/components/app.js b/app/components/app.js index 187c852..212c4d4 100644 --- a/app/components/app.js +++ b/app/components/app.js @@ -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 ; + return ( + + + + ); } componentWillMount() { @@ -21,6 +45,11 @@ export default class extends React.Component { + } configureScene={(route) => { if (route.sceneConfig) { return route.sceneConfig; diff --git a/app/components/navigation/BackButton.js b/app/components/navigation/BackButton.js new file mode 100644 index 0000000..67b4a1d --- /dev/null +++ b/app/components/navigation/BackButton.js @@ -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 ; + } + return ( + + + B + + + ); + } +} diff --git a/app/components/navigation/RouteMapper.js b/app/components/navigation/RouteMapper.js new file mode 100644 index 0000000..d0645cf --- /dev/null +++ b/app/components/navigation/RouteMapper.js @@ -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 ( + + ); + }, + + RightButton(route, nav, index, navState) { + return ( + + ); + }, + + Title(route, nav, index, navState) { + return ( + + ); + }, + +}; diff --git a/app/components/navigation/Title.js b/app/components/navigation/Title.js new file mode 100644 index 0000000..b7cb01f --- /dev/null +++ b/app/components/navigation/Title.js @@ -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 ( + + { title } + + ); + } +}