import RX = require ( 'reactxp' ) ; import MainPanel = require ( './MainPanel' ) ; import SecondPanel = require ( './SecondPanel' ) ; enum NavigationRouteId { MainPanel , SecondPanel } const styles = { navCardStyle : RX . Styles . createViewStyle ( { backgroundColor : '#f5fcff' } ) } ; class App extends RX . Component < { } , null > { private _navigator : RX . Navigator ; componentDidMount ( ) { this . _navigator . immediatelyResetRouteStack ( [ { routeId : NavigationRouteId . MainPanel , sceneConfigType : RX . Types . NavigatorSceneConfigType . Fade } ] ) ; } render ( ) { return ( < RX . Navigator ref = { this . _onNavigatorRef } renderScene = { this . _renderScene } cardStyle = { styles . navCardStyle } / > ) ; } private _onNavigatorRef = ( navigator ) => { this . _navigator = navigator ; } ; private _renderScene = ( navigatorRoute ) => { switch ( navigatorRoute . routeId ) { case NavigationRouteId . MainPanel : return < MainPanel onPressNavigate = { this . _onPressNavigate } />; case NavigationRouteId . SecondPanel : return < SecondPanel onNavigateBack = { this . _onPressBack } />; } return null ; } ; private _onPressNavigate = ( ) => { this . _navigator . push ( { routeId : NavigationRouteId . SecondPanel , sceneConfigType : RX . Types . NavigatorSceneConfigType . FloatFromRight , customSceneConfig : { hideShadow : true } } ) ; } ; private _onPressBack = ( ) => { this . _navigator . pop ( ) ; } ; } export = App ;