Navigator # | Edit on GitHub |
Use Navigator
to transition between different scenes in your app. To
accomplish this, provide route objects to the navigator to identify each
scene, and also a renderScene
function that the navigator can use to
render the scene for a given route.
To change the animation or gesture properties of the scene, provide a
configureScene
prop to get the config object for a given route. See
Navigator.SceneConfigs
for default animations and more info on
scene config options.
If you have a ref to the Navigator element, you can invoke several methods on it to trigger navigation:
getCurrentRoutes()
- returns the current list of routesjumpBack()
- Jump backward without unmounting the current scenejumpForward()
- Jump forward to the next scene in the route stackjumpTo(route)
- Transition to an existing scene without unmountingpush(route)
- Navigate forward to a new scene, squashing any scenes
that you could jumpForward
topop()
- Transition back and unmount the current scenereplace(route)
- Replace the current scene with a new routereplaceAtIndex(route, index)
- Replace a scene as specified by an indexreplacePrevious(route)
- Replace the previous sceneresetTo(route)
- Navigate to a new scene and reset route stackimmediatelyResetRouteStack(routeStack)
- Reset every scene with an
array of routespopToRoute(route)
- Pop to a particular scene, as specified by its
route. All scenes after it will be unmountedpopToTop()
- Pop to the first scene in the stack, unmounting every
other sceneOptional function that allows configuration about scene animations and gestures. Will be invoked with the route and the routeStack and should return a scene configuration object
Specify a route to start on. A route is an object that the navigator
will use to identify each scene to render. initialRoute
must be
a route in the initialRouteStack
if both props are provided. The
initialRoute
will default to the last item in the initialRouteStack
.
Provide a set of routes to initially mount. Required if no initialRoute
is provided. Otherwise, it will default to an array containing only the
initialRoute
Optionally provide a navigation bar that persists across scene transitions
Optionally provide the navigator object from a parent Navigator
Use navigationContext.addListener('didfocus', callback)
instead.
Will be called with the new route of each scene after the transition is complete or after the initial mounting
Use navigationContext.addListener('willfocus', callback)
instead.
Will emit the target route upon mounting and before each nav transition
Required function which renders the scene for a given route. Will be invoked with the route and the navigator object
Styles to apply to the container of each scene