react-native-router
This module is Navigator extension.you can manage all of route with configuration.
Install
npm install mkp-react-native-router --save
Support
IOS/Android
Quick Start
<Router ref="router" renderTitle= { return <Text style=color: "white">routetitle</Text>; } renderLeftButton= { if index > 0 return <Text style=color: "white" onPress= { navigator; }>back</Text> return null; } navigationBarStyle=backgroundColor: "black" routes= path: "home" title: "Home" component: Home path: "register" title: "Register-Step1" component: RegisterStep1 routes: path: "step2" title: "Register-Step2" hideNavigationBar: true component: RegisterStep2 ></Router>
Router Props
renderTitle(route:route,navigator:NavigatorEx,index:number,navState:route[])
Set title for navigation.
the default value will return a text node:
<Text>routetitle</Text>
renderLeftButton(route:route,navigator:NavigatorEx,index:number,navState:route[])
Set back button or left button for navigation, null as default value.
navigationBarStyle
Set navigation style
routes
The first route as initial route
type route
- path:string
route path that is required. - title:string
navigation title - renderLeftButton(route:route,navigator:NavigatorEx,index:number,navState:route[]):function
set left button for navigation. if it is provided , the Router.renderLeftButton will be ignore. - renderRightButton(route:route,navigator:NavigatorEx,index:number,navState:route[]):function
set right button for navigation. - renderTitle(route:route,navigator:NavigatorEx,index:number,navState:route[]):function
if it is provided , the Router.renderTitle will be ignored. - hideNavigationBar:boolean [hideNavigationBar=false]
whether hide navigation. - routes:route[]
this is required. - component:Component
- onEnter(route:route):function
invoke when navigator.$push,you can return a available path to redirect or nothing.
NOTE1:if you return a available path in here , you can access route.$previousRoute and route.$previousPath in new path.
NOTE2:don't be invoked when start app from initial route.
configureScene()
configure page transition, you can refer to React Native Navigator
the default value is Navigator.SceneConfigs.HorizontalSwipeJump.
onChange(type:string,route:route,path:string)
Invoke when navigator $push,$pop,$replace,$refreshNavBar
navigator methods
$push(path:string[,route:route])
router will push to target path.the parameter route will override route which find by path.
//go to 'register'thispropsnavigator//go to 'register/register-step2' thispropsnavigator;//override route which find by path with the second parameterthispropsnavigator;
in addition you can pass props through the second parameter.
thispropsnavigator
$pop()
back to previous route.
$replace(path:string[,route:route])
replace current route with path. the second parameter is the same as $push
$refreshNavBar([route:route])
Refresh navigation's style.
thispropsnavigator
NOTE:this method must't be calling in component's lifecycle, such as componentDidMount,only calling in sceneDidFocussceneDidFocus.
Router event
sceneDidFocus(route)
Refer to Navigator.onDidFocus
{ //do something }
sceneWillFocus(route)
Refer to Navigator.onWillFocus
{ //do something }
Authentication
Example
const routes = path: "home" title: "Home" component: Home path: "register" title: "Register-Step1" component: RegisterStep1 routes: path: "step2" title: "Register-Step2" hideNavigationBar: true component: RegisterStep2 path: "login" title: "Login" component: Login path: "mine" title: "Mine" component: Mine { if !isLogin return "login"; };
after login success.
thispropsnavigator;
or
thispropsnavigator;
Async Authentication
More time we determine login state with token , but we can't get token value in sync , so we need a page to initial some data , such as token . after we can use these data in sync. when you need to restore redux , the step is useful. sample code following:
windowappData= token:""; { }
you can get current net state or anything data in here except above.
How to use Router with Redux
;; const RouterWithRedux = Router; <Provider store=store> <RouterWithRedux navigationBarStyle=navigationStylesnavigationBar renderTitle= { return <View style=navigationStylesbase> <Text style=navigationStylestitle>routetitle</Text> </View> ; } renderLeftButton= { if index > 0 return <TouchableHighlight style=navigationStylesbase navigationStylesleftButton onPress= { navigator; }> <Image source=/> </TouchableHighlight > ; return null; } routes=routes></RouterWithRedux></Provider>
you can deal with some action that is 'SCENE_WILL_FOCUS' and 'SCENE_DID_FOCUS' in reducer. example following,
;{ }
How to deal with hardware back event on android
Router provide two property currentRoute and navigator, you can do something through these property. following code:
{ superprops; BackAndroid; } { return <Router ref="router"></Router> }
How to place navigation title in the middle on android?
<Router renderTitle={ return <View style=flex:1justifyContent:"center"alignItems:"center"...Platform> <Text>routetitle</Text> </View> ; } />