《React-Native系列》6、Navigator语法介绍及经典应用

今天来介绍下ReactNative的Navigator组件。

先来看看官网是怎么说的：

使用导航器可以让你在应用的不同场景（页面）间进行切换。导航器通过路由对象来分辨不同的场景。利用renderScene方法，导航栏可以根据指定的路由来渲染场景。

可以通过configureScene属性获取指定路由对象的配置信息，从而改变场景的动画或者手势。查看Navigator.SceneConfigs来获取默认的动画和更多的场景配置选项。

提供的方法：

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

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

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

jumpTo(route) - 跳转到已有的场景并且不卸载。

push(route) - 跳转到新的场景，并且将场景入栈，你可以稍后跳转过去

pop() - 跳转回去并且卸载掉当前场景

replace(route) - 用一个新的路由替换掉当前场景

replaceAtIndex(route, index) - 替换掉指定序列的路由场景

replacePrevious(route) - 替换掉之前的场景

resetTo(route) - 跳转到新的场景，并且重置整个路由栈

immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈

popToRoute(route) - pop到路由指定的场景，在整个路由栈中，处于指定场景之后的场景将会被卸载。

popToTop() - pop到栈中的第一个场景，卸载掉所有的其他场景。

属性：（我只列出几个常用的属性）

1、configureScene      

function 可选的函数，用来配置场景动画和手势。会带有两个参数调用，一个是当前的路由，一个是当前的路由栈。然后它应当返回一个场景配置对象

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

Navigator.SceneConfigs.PushFromRight (默认)

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

2、renderScene 

function 必要参数。用来渲染指定路由的场景。调用的参数是路由和导航器。

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

3、initialRoute 

object 

定义启动时加载的路由。路由是导航栏用来识别渲染场景的一个对象。

简单介绍完Navigator，我们来实现一个经典的例子，如下图所示。



其实，做过Android开发的是不是很熟悉，startActivityForResult    

那么我们看看RN怎么实现，说了这么多还没有写一行代码.

一、初始化Navigator 

render() {
let defaultName = 'FormManager';
let defaultComponent = FormManager;
return (
<Navigator
initialRoute={{ name: defaultName, component: defaultComponent }}
configureScene={(route) => {
if (route.sceneConfig) {
return route.sceneConfig;
}
return Navigator.SceneConfigs.HorizontalSwipeJump;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}}
/>
);
}

上面的代码：

我们通过initialRoute初始化了一个Route，定义了初始化的Component。

设置了切换的动画效果：Navigator.SceneConfigs.HorizontalSwipeJump

指定路由和导航器，注意一定要有navigator={navigator} ，将导航器传递。

二、压栈

在FormManager这个Component中，譬如我们点击字段1，调用onPress方法，跳转到选项页面，代码如下：

choose(){
const self=this;
const { navigator } = this.props;
if(navigator) {
var route ={
name: 'ChooseItemComponent',
component: ChooseItemComponent,
params:{
title:"选择页面",
selectedItem:self.state.city,
originList:cityList,
getSelectedItem: function(selectedItem) {
InteractionManager.runAfterInteractions(() => {
self.setState({
city: cityList[selectedItem],
})
});
}
},
sceneConfig:Navigator.SceneConfigs.VerticalUpSwipeJump,
};
navigator.push(route);
}
}

这里我们需要注意几点：

1、const { navigator } = this.props; 从props里获取Navigator，确保一直用的同一个。

2、定义一个Route

包含：name、component（待跳转的）

params：一个对象，包含我们需要传递过去的数据和回调方法，回调方法获取选中值后更新状态机变量，这样选中的结构在Form上立马就能看见。

getSelectedItem  就是回调方法，我们就是通过这个方法来实现值得回传。

细心的朋友可能还发现有：

sceneConfig:Navigator.SceneConfigs.VerticalUpSwipeJump,

这个和初始化Navigator有关，

if (route.sceneConfig) {
return route.sceneConfig;
}

这个配置这个sceneConfig属性，我们就可以实现在一个Navigator里切换动画。

譬如：我从一个水平从右向左切入的动画，变换成一个垂直的从上到下切入的动画。

3、navigator.push(route);

Navigator压栈，这个就不用说了吧，有点开发经验的都秒懂

三、出栈，并回调

现在我们已经到了选择项的页面，当我们选择某项数据的时候，将选中的值赋给parent页面，并销毁本页面。

代码如下：

_chooseItem(i){
var  self = this ;
InteractionManager.runAfterInteractions(() => {
self.setState({
selectedItem:i,
})
});
const { navigator } = this.props;
if(this.props.getSelectedItem){
this.props.getSelectedItem(i);
}
setTimeout(function(){
if(navigator) {
navigator.pop();
}
} ,500);
}

这里我们做了以下几件事：

1、修改本页面的状态机变量，通常表现为，选中某项后，显示一个对勾图片。（用户体验）

2、从props中获取Navigator，调用回调方法getSelectedItem，将值回传给parent。

3、pop掉本页面

这样我们就基本实现了我们要做的功能。是不是很简单呢？

另外，我们使用了InteractionManager.runAfterInteractions的参数中包含一个回调，这个回调会在navigator切换动画结束的时候被触发。这个不在本文讨论的范围。

参考：http://reactnative.cn/docs/0.30/navigator.html#content