ReactNative页面跳转Navigator

这是一个简单的例子，用Navigator来跳转页面，页面之间传递参数 (代码是ES6语法写的):

这是一个简单的例子，用Navigator来跳转页面，页面之间传递参数 (代码是ES6语法写的):

import React from 'react';
import {
View,
Navigator
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';

export default class SampleComponent extends React.Component {
render() {
let defaultName = 'FirstPageComponent';
let defaultComponent = FirstPageComponent;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);
}
} ```
这里来解释一下代码:

第三行: 一个初始首页的component名字，比如我写了一个component叫HomeComponent，那么这个name就是这个组件的名字【HomeComponent】了。

第四行: 这个组件的Class，用来一会儿实例化成 <Component />标签

第七行: initialRoute={{ name: defaultName, component: defaultComponent }} 这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。（注意这里填什么参数纯粹是自定义的，因为这个参数也是你自己发自己收，自己在renderScene方法中处理。我们这里示例用了两个参数，但其实真正使用的参数只有component）

第八，九，十行: configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}} 这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

最后的几行: renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);

这里是每个人最疑惑的，我们先看到回调里的两个参数:route, navigator。通过打印我们发现route里其实就是我们传递的name,component这两个货，navigator是一个Navigator的对象，为什么呢，因为它有push pop jump...等方法，这是我们等下用来跳转页面用的那个navigator对象。

return <Component {...route.params} navigator={navigator} />
这里有一个判断，也就是如果传递进来的component存在，那我们就是返回一个这个component，结合前面 initialRoute 的参数，我们就是知道，这是一个会被render出来给用户看到的component，然后navigator作为props传递给了这个component。

所以下一步，在这个FirstPageComponent里面，我们可以直接拿到这个 props.navigator:

import React from ‘react’;

import {

View,

Navigator

} from ‘react-native’;

import SecondPageComponent from ‘./SecondPageComponent’;

export default class FirstPageComponent extends React.Component {

constructor(props) {

super(props);

this.state = {};

}

_pressButton() {

const { navigator } = this.props;

//为什么这里可以取得 props.navigator?请看上文:

//

这个里面创建了一个可以点击的区域，让我们点击可以跳到SecondPageComponent这个页面，实现页面的跳转。
现在来创建SecondPageComponent，并且让它可以再跳回FirstPageComponent:

import React from ‘react’;

import {

View,

Navigator

} 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) {
//很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent了
navigator.pop();
}
}

render() {
return (
<View>
<TouchableOpacity onPress={this._pressButton.bind(this)}>
<Text>点我跳回去</Text>
</TouchableOpacity>
</View>
);
}

}

大功告成，能进能出了。

关于官方文档里有个东西，这里说一下:

getCurrentRoutes() - 获取当前栈里的路由，也就是push进来，没有pop掉的那些

jumpBack() - 跳回之前的路由，当然前提是保留现在的，还可以再跳回来，会给你保留原样。

jumpForward() - 上一个方法不是调到之前的路由了么，用这个跳回来就好了

jumpTo(route) - Transition to an existing scene without unmounting

push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to

pop() - Transition back and unmount the current scene

replace(route) - Replace the current scene with a new route

replaceAtIndex(route, index) - Replace a scene as specified by an index

replacePrevious(route) - Replace the previous scene

immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes

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

popToTop() - Pop to the first scene in the stack, unmounting every other scene