(React Native) Razor
Router for React Native with declarative configuration similar to React Router.
- Declarative configuration (using
<Route>
similar to react-router) - Idiomatic React; no imperative API or self-contained state (unlike react-router)
- Uses
NavigatorExperimental
(soon to replaceNavigator
andNavigatorIOS
in core React Native)
Install
npm install rn-razor --save
Usage
Configuration
; Component state = routerState: StateUtils ; { <Router routerState=thisstaterouterState> <Route name="index" component=Index /> <Route name="profile" component=Profile /> <Route name="contacts" component=ContactList /> <Route name="contact" component=ContactDetail /> </Router> }
Navigation
; routerState = StateUtils;routerState = StateUtils;routerState = StateUtils;routerState = StateUtils;
Reference
<Router>
routerState
The current state of navigation.
Can be initialized to an initial route with StateUtils.create({initialRoute: "..."})
.
Example
{
index: 1,
routes: [
{ name: "index" },
{ name: "contact-detail", params: { id: 3 } },
]
}
children
A collection of <Route>
components providing the declarative configuration.
onWillFocus
Called when a route is about to be rendered or "focused" (name comes from react-native). This is called after the route's onEnter
(if present).
onDidFocus
Called when a route has been rendered or "focused". This is called after the route component's componentDidMount
(tip: good place to hide a splash screen from rn-splash-screen).
createElement
When the router is ready to render a specific scene, it will use this function to create the elements.
Default
{ return <Component ...props />}
render
When the router is ready to render the scene stack, it will use this function.
Use this callback to add persistent views around the scene stack. Perhaps a navigation drawer or wrap scenes
in KeyboardAvoidingView
from react-native.
Default
{ return scenes;}
<Route>
name
The route key to use as a unique index during navigation.
component
The component to be rendered for the route.
onEnter
Called when a route is about to be entered.
onLeave
Called when a route is about to be exited. Called before the next route's onEnter
.
children
A collection of <Route>
components that are treated as a group, invoking their parent's onEnter
and onLeave
as a group.
For instance, a group of routes can be given a single onLeave
or onEnter
that is called when the router is no longer in the group or when entering the group for the first time.
Note that a <Route>
cannot have both a component
and children
as component nesting is not currently supported.