我们从传递过来的属性中获取navigator，然后调用navigator的push方法，push方法接收的参数为route对象，我们定义route对象的名称和组件对象，将其放入路由栈，这样我们通过操控路由栈的方式实现了另一个页面的跳转。
这样我们改造后的FirstPageComponent如下所示：
import React,{ View, Text, TouchableOpacity } from 'react-native'; import SecondPageComonent from "./SecondPageComponent"; export default class FirstPageComponent extends React.Component{ constructor(props){ super(props); this.state = {}; } _pressButtoon(){ const { navigator} = this.props; if (navigator) { navigator.push({ name:'SecondPageComonent', component:SecondPageComonent, }) } } render(){ return ( <View> <TouchableOpacity onPress={this._pressButtoon.bind(this)}> <Text>点我跳转</Text> </TouchableOpacity> </View> ); } }
其中SecondPageComonent是我们定义的另一个组件，实现代码如下所示：
import React,{ View, Text, TouchableOpacity, } from 'react-native'; import FirstPageComponent from './FirstPageComponent'; export default class SecondPageComponent extends React.Component{ constructor(props){ super(props); this.state = {}; } _pressButton(){ const { navigator } = this.props; if(navigator){ navigator.pop(); } } render(){ return ( <View> <TouchableOpacity onPress={this._pressButton.bind(this)}> <Text>点我跳转回去</Text> </TouchableOpacity> </View> ); } }
在SecondPageComponent中，我们通过控制路由栈将页面出栈的方式pop()完成跳转回到第一个页面的功能。
我们发现，页面的跳转都是通过navigator对象的一系列方法通过对路由栈的操控来实现页面之间跳转加载的功能的，我们看一下导航器都有那些方法：
getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些。
jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景，其他的场景将会卸载。
popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。
参数的传递
当我们从一个页面跳转到另一个页面的时候，总免不了需要进行参数的传递，那么我们怎么将参数传递到另一个页面呢？
我们可以通过push()方法将参数传递过去。
首先我们需要明确FirstPageComponent，MyProject和SecondPageComponent三者之间的关系，程序启动时首先会启动MyProject，然后看到在MyProject中有一个导航器，该导航器初始化路由的时候获取了我们的FirstPageComponent，将其解析为一个组件在renderScene的时候将其加载到页面上。我们再来看一下导航器加载的方法：
renderScene={(route, navigator) => { let Component = route.component; if(route.component){ return <Component navigator={navigator} /> } }}
我们所有的组件都是通过导航器加载到页面上的，第一个页面是，第二个页面并不是由第一个页面启动的，而是有导航器控制路由栈来显示在页面上的，我们在renderScene是获取到第一个页面，并且将其渲染到屏幕上，我们在第一个页面中设置的push信息也是将信息传递给导航器的，那么我们就可以在这个时候将需要传递给Navigator，然后让其在传递给第二个页面，这样就可以完成参数的传递。
首先我们更改FirstPageComponent的按钮点击事件，如下所示：
navigator.push({ name:'SecondPageComonent', component:SecondPageComonent, params:{ message:"I am from FirstPageComponent", } })
然后在Navigator中获取，如下所示：
renderScene={(route, navigator) => { let Component = route.component; if(route.component){ return <Component {...route.params} navigator={navigator} /> } }}
在这里就相当于将参数传递给了Navigator，展开成然后我们就可以在第二个页面中通过props.message获取到信息，如下所示,添加页面挂载时的方法，设置状态的方法将获取到的参数保存在state中：
componentDidMount(){ this.setState({ message:this.props.message, }); }