mobile-navigation-controller

mobile-navigation-controller

It's manager for your pages like mobile app.

import Navigator from 'mobile-navigation-controller';

For example: In the render function return

<Navigator onRef={ref => (this.navigatorRef = ref)} >


         <MyHomePage key="home" levelPage={0} />

          <AboutPage key="about"
           levelPage={1}
              transitionIn={
             animatioPageIn:"fadeInRight"
             ,animatioPageOut:"fadeOutRight"
           }
            transitionOut={{
            animatioPageOut: "fadeOutRight"
          }}
           />


 </Navigator>

Note: prop levelPage important to manage the returs (from back button) in the structure of a tree

To change page you get the ref and do:

this.navigatorRef.changePage("about");

the option to changePage it's:

this.navigatorRef.changePage(
                goToPage //Required
              ,{options}// Not requred
              );

options => {  animationIn:string // have defult
            , animationOut:string // have defult
            , timeAnimationInMS:integer // defult=250(ms)
            , callbackFun:function
            , props:{}
              }

*animationIn and animationOut need name animate from here
*the animate.css includ in this package

Options:

Navigator props

prop	type	required	defult	node
onRef		required	-	onRef={ref => (this.navigatorRef = ref)}
key	string	required	-
height	string or integer	optional	"100%"
onChangePage	function	optional	-	(nowPageKey,levelAction) => { ... }
beforChangePage	function	optional	-	(goToPageKey,levelAction) => { ... }
homePageKey	string	optional	The key of the first child	(nowPageKey,levelAction) => { ... }
changeRoute	boolean	optional	true (on cordova native platforms => false)	Determines whether to change the URL to the component key

*levelAction return "Out" or "In" or "SameLevel"

Child props

prop	type	required	defult	node
levelPage	integer	required	-	important!
backgroundColor	string	optional	#fff
height	string or integer	optional	"100%"
backOnSwipeRight	boolean	optional	false	May be problematic with css "padding-left"
alwaysLive	boolean	optional	false	Don't kill the child. Life is always in the background
transitionIn	json	optional	-
kill	boolean	optional	-

Check what is page now

const nowPage= this.navigatorRef.nowPage;

Get the historyPages list

const historyPages= this.navigatorRef.historyPages();

Get the listLevelPages list

const listLevelPages= this.navigatorRef.listLevelPages();

Back 1 page history

this.navigatorRef.back();

or

this.navigatorRef.back({options...});

options => { animationIn:integer // have defult , animationOut:string // have defult , timeAnimationInMS:integer // defult=250(ms) , callbackFun:function , props:{...} }

Check if the mangerPages is busy

const navigator_busy= this.navigatorRef.busy;

*busy return boolean

If you have any problem, please let us know here, and we will make an effort to resolve it soon

Feel free to editing the code yourself: go to src/index.js

Credit: Arik Wald

Credit animated: animate.css -https://daneden.github.io/animate.css/