'use strict';

import React, { Component } from 'react';

import {

  AppRegistry,

  ScrollView,

  StyleSheet,

  Text,

  View,

  TouchableHighlight,

  Navigator,

} from 'react-native';

class NavButton extends React.Component{

   render(){

     return(

       <TouchableHighlight style={styles.button}

       underlayColor='#b5b5b5' onPress={this.props.onPress}>

       <Text style={styles.text}>{this.props.text}</Text>

       </TouchableHighlight>

     );

   }

}

class NavMenu extends React.Component{

  render(){

    return(

      <View style={{flex:1,}}>

      <Text style={styles.messageText}>{this.props.message}</Text>

      <NavButton onPress={()=>{this.props.navigator.push({

        message:'Push进来的页面',

        sceneConfig:Navigator.SceneConfigs.FloatFromRight,

      });}} text='Push到下一级页面' />

      <NavButton onPress={() => {

            this.props.navigator.push({

              message: 'Present进来的页面',

              sceneConfig: Navigator.SceneConfigs.FloatFromBottom,

            });

          }}

          text="Present到下一级页面"

        />

        <NavButton onPress={() => {

            this.props.navigator.pop();

          }}

          text="Pop到上一级页面"

        />

        <NavButton  onPress={() => {

            this.props.navigator.popToTop();

          }}

          text="Pop到主页面"

        />

      </View>

    );

  }

}

class MyProject extends Component {

  render() {

    return (

      <Navigator style={styles.container}  initialRoute={{message:'主页面',}}

      renderScene={(route,navigator)=><NavMenu

            message={route.message}

            navigator={navigator}

          />} configureScene={(route)=>{

             if (route.sceneConfig) {

               return route.sceneConfig;

             }

             return Navigator.SceneConfigs.FloatFromBottom;

          }}/>

    );

  }

}

const styles = StyleSheet.create({

  container: {

      flex: 1,

     },

     messageText: {

      fontSize: 14,

      fontWeight: '500',

      padding: 15,

      marginTop: 50,

      marginLeft: 15,

    },

    button: {

      backgroundColor: 'green',

      padding: 15,

      borderBottomWidth: StyleSheet.hairlineWidth,

      borderBottomColor: 'black',

    },

    text:{

      fontSize:14,

      color:'white',

    },

});

AppRegistry.registerComponent('MyProject', () => MyProject);