Navigator is React Native’s default navigator. A Navigator component manages a stack of route objects, and provides methods for managing that stack.
<Navigatorref={(navigator) => { this.navigator = navigator }}initialRoute={{ id: 'route1', title: 'Route 1' }}renderScene={this.renderScene.bind(this)}configureScene={(route) => Navigator.SceneConfigs.FloatFromRight}style={{ flex: 1 }}navigationBar={// see "Managing the Navigation Bar" below<Navigator.NavigationBar routeMapper={this.routeMapper} />}/>
Managing the Route Stack
First of all, notice the initialRoute prop. A route is simply a javascript object, and can take whatever shape you want, and have whatever values you want. It’s the primary way you’ll pass values and methods between components in your navigation stack.
The Navigator knows what to render based on the value returned from its renderScene prop.
renderScene(route, navigator) {if (route.id === 'route1') {return <ExampleScene navigator={navigator} title={route.title} />; // see below} else if (route.id === 'route2') {return <ExampleScene navigator={navigator} title={route.title} />; // see below}}
Let’s imagine an implementation of ExampleScene in this example:
function ExampleScene(props) {function forward() {// this route object will passed along to our `renderScene` function we defined above.props.navigator.push({ id: 'route2', title: 'Route 2' });}function back() {// `pop` simply pops one route object off the `Navigator`'s stackprops.navigator.pop();}return (<View><Text>{props.title}</Text><TouchableOpacity onPress={forward}><Text>Go forward!</Text></TouchableOpacity><TouchableOpacity onPress={back}><Text>Go Back!</Text></TouchableOpacity></View>);}
Configuring the Navigator
You can configure the Navigator‘s transitions with the configureScene prop. This is a function that’s passed the route object, and needs to return a configuration object. These are the available configuration objects: