diff --git a/releases/next/docs/navigator.html b/releases/next/docs/navigator.html index 4a2044f8a57..e71f62a3c5b 100644 --- a/releases/next/docs/navigator.html +++ b/releases/next/docs/navigator.html @@ -1,48 +1,129 @@ -Navigator – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

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.

Basic Usage #

<Navigator - initialRoute={{name: 'My First Scene', index: 0}} - renderScene={(route, navigator) => - <MySceneComponent - name={route.name} - onForward={() => { - var nextIndex = route.index + 1; - navigator.push({ - name: 'Scene ' + nextIndex, - index: nextIndex, - }); - }} - onBack={() => { - if (route.index > 0) { +Navigator – React Native | A framework for building native apps using React
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

Navigator #

Edit on GitHub

Navigator handles the transition between different scenes in your app. +You should consider using this component instead of NavigatorIOS if you're +building a cross-platform app. Navigator is implemented in JavaScript +whereas NavigatorIOS is a wrapper around UINavigationController.

To set up the Navigator you provide one or more objects called routes, +to identify each scene. You also provide a renderScene function that +renders the scene for each route object.

import React, { Component } from 'react'; +import { Text, Navigator } from 'react-native'; + +class NavAllDay extends Component { + render() { + return ( + <Navigator + initialRoute={{name: 'Awesome Scene'}} + renderScene={(route, navigator) => + <Text>Hello {route.name}!</Text> + } + style={{padding: 100}} + /> + ); + } +}

In the above example, initialRoute is used to specify the first route. It +contains a name property that identifies the route. The renderScene +prop returns a function that displays text based on the route's name.

Additional Scenes #

The first example demonstrated one scene. To set up multiple scenes, you pass +the initialRouteStack prop to Navigator:

render() { + const routes = [ + {name: 'First Scene', index: 0}, + {name: 'Second Scene', index: 1}, + ]; + return ( + <Navigator + initialRoute={routes[0]} + initialRouteStack={routes} + renderScene={(route, navigator) => + <TouchableHighlight onPress={() => { + if (route.index === 0) { + navigator.push(routes[1]); + } else { navigator.pop(); } - }} - /> + }}> + <Text>Hello {route.name}!</Text> + </TouchableHighlight> + } + style={{padding: 100}} + /> + ); +}

In the above example, a routes variable is defined with two route objects +representing two scenes. Each route has an index property that is used to +manage the scene being rendered. The renderScene method is changed to +either push or pop the navigator depending on the current route's index. +Finally, the Text component in the scene is now wrapped in a +TouchableHighlight component to help trigger the navigator transitions.

Navigation Bar #

You can optionally pass in your own navigation bar by returning a +Navigator.NavigationBar component to the navigationBar prop in +Navigator. You can configure the navigation bar properties, through +the routeMapper prop. There you set up the left, right, and title +properties of the navigation bar:

<Navigator + renderScene={(route, navigator) => + // ... + } + navigationBar={ + <Navigator.NavigationBar + routeMapper={{ + LeftButton: (route, navigator, index, navState) => + { return (<Text>Cancel</Text>); }, + RightButton: (route, navigator, index, navState) => + { return (<Text>Done</Text>); }, + Title: (route, navigator, index, navState) => + { return (<Text>Awesome Nav Bar</Text>); }, + }} + style={{backgroundColor: 'gray'}} + /> + } +/>

When configuring the left, right, and title items for the navigation bar, +you have access to info such as the current route object and navigation +state. This allows you to customize the title for each scene as well as +the buttons. For example, you can choose to hide the left button for one of +the scenes.

Typically you want buttons to represent the left and right buttons. Building +on the previous example, you can set this up as follows:

LeftButton: (route, navigator, index, navState) => + { + if (route.index === 0) { + return null; + } else { + return ( + <TouchableHighlight onPress={() => navigator.pop()}> + <Text>Back</Text> + </TouchableHighlight> + ); } - />

Props #

configureScene function #

Optional 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

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

Available options are:

  • Navigator.SceneConfigs.PushFromRight (default)
  • Navigator.SceneConfigs.FloatFromRight
  • Navigator.SceneConfigs.FloatFromLeft
  • Navigator.SceneConfigs.FloatFromBottom
  • Navigator.SceneConfigs.FloatFromBottomAndroid
  • Navigator.SceneConfigs.FadeAndroid
  • Navigator.SceneConfigs.HorizontalSwipeJump
  • Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
  • Navigator.SceneConfigs.VerticalUpSwipeJump
  • Navigator.SceneConfigs.VerticalDownSwipeJump

initialRoute 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.

initialRouteStack [object] #

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

navigationBar node #

Optionally provide a component as navigation bar that persists across scene -transitions. The component will receive two props: navigator and navState. -It will be rerendered when the routes change.

navigator object #

Optionally provide the navigator object from a parent Navigator

onDidFocus function #

Will be called with the new route of each scene after the transition is -complete or after the initial mounting

onWillFocus function #

Will emit the target route upon mounting and before each nav transition

renderScene function #

Required function which renders the scene for a given route. Will be -invoked with the route and the navigator object

(route, navigator) => - <MySceneComponent title={route.title} navigator={navigator} />

sceneStyle View#style #

Styles to apply to the container of each scene

Methods #

immediatelyResetRouteStack(nextRouteStack) #

Reset every scene with an array of routes.

Parameters:
Name and TypeDescription
nextRouteStack

RouteStack

Next route stack to reinitialize. This -doesn't accept stack item ids, which implies that all existing items are -destroyed, and then potentially recreated according to routeStack. Does -not animate, immediately replaces and rerenders navigation bar and stack -items.

jumpTo(route) #

Transition to an existing scene without unmounting

jumpForward() #

Jump forward to the next scene in the route stack.

jumpBack() #

Jump backward without unmounting the current scene.

push(route) #

Navigate forward to a new scene, squashing any scenes that you could -jumpForward to.

pop() #

Transition back and unmount the current scene.

replaceAtIndex(route, index, cb) #

Replace a scene as specified by an index

index specifies the route in the stack that should be replaced. -If it's negative, it counts from the back.

replace(route) #

Replace the current scene with a new route.

replacePrevious(route) #

Replace the previous scene.

popToTop() #

Pop to the first scene in the stack, unmounting every other scene.

popToRoute(route) #

Pop to a particular scene, as specified by its route. -All scenes after it will be unmounted.

replacePreviousAndPop(route) #

Replace the previous scene and pop to it.

resetTo(route) #

Navigate to a new scene and reset route stack.

getCurrentRoutes() #

Returns the current list of routes.

Next →
© 2016 Facebook Inc.