RN组件之Navigator

一.Navigator

　　1.使用导航器能够在应用的不一样场景(页面)间进行切换.导航器经过路由对象来分辨不一样的场景.利用renderScene方法,导航栏能够根据

　　　指定的路由来渲染场景.

　　　能够经过configureScene属性获取指定路由对象的配置信息,从而改变场景的动画或者手势,查看Navigator.SceneConfigs来获取默认

　　　的动画和更多的场景配置选项

　　2.导航方法

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

　　　　　　jumpBack():跳回以前的路由,固然前提是保留如今的,还能够再跳回来,会保留原样.

　　　　　　jumpForward():上一个方法跳到以前的路由,这个跳回来.

　　　　　　jumpTo(route):跳转到已有的场景而且不卸载.

　　　　　　push(route):跳转到新的场景,而且将场景入栈,能够稍后跳转过去.

　　　　　　pop():跳转回去而且卸载掉当前场景

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

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

　　　　　　replacePrevious(route):替换掉以前的场景

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

　　　　　　popToRoute(route):pop到路由指定的场景,其余场景将会卸载

　　　　　　popToTop():pop到栈中的第一个场景,卸载掉全部的其余场景

　　3.属性

　　　　　　configureScene function :可选的函数,用来配置场景动画和手势.带两个参数调用,一个是当前路由,一个

　　　　　　　　　　　　　　　　　　　是当前的路由栈.而后它应该返回一个场景配置对象.

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

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

　　　　　　　　　　　　　　　　必须是initalRouteStack中的一个路由.initialRoute默认为initialRouteStack中

　　　　　　　　　　　　　　　　最后一项.

　　　　　　initailRouteStack object:提供一个路由集合来初始化,若是没有设置初始路由的话则必须设置该属性.

　　　　　　　　　　　　　　　　　　　若是没有提供该属性,它将被默认设置成一个只含有initialRoute的数组.

　　　　　　navigationBar node: 提供一个在场景切换的时候保持的导航栏

　　　　　　navigator object:可选参数,提供从父导航器得到的导航器对象

　　　　　　onDidFoucus function :已废弃,使用navigationContext.addListener('didifocus',callback)来替代.

　　　　　　　　　　　　　　　　　　每当导航切换完成或初始化以后,调用此回调,参数为新场景的路由.

　　　　　　onWillFocus function:已废弃,使用navigationContext.addListener('willfocus','callback')来代替.

　　　　　　　　　　　　　　　　　会在导航切换以前调用,参数为目标路由

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

　　　　　　sceneStyle View stlye 将会应用在每一个场景的容器上的样式

　　　　　　官文

 

　　　　　　push()和pop()之间来回掉数据,大概格式

　　　　　　onPress={this.navigator.push({

　　　　　　　　location:''

　　　　　　　　extramParam:{

　　　　　　　　　　　　　　param1,

　　　　　　　　　　　　　　callBack:()=>this.setState({...});

　　　　　　　　　　　　}　　

　　　　　　　　});

　　　　　　}

 

　　　　　　　　另外一个页面

　　　　　　　onPress={

　　　　　　　　　　　()=>{

　　　　　　　　　　　　　　if(this.props.extraParams  && this.props.extraParams.callBack){

　　　　　　　　　　　　　　　　this.props.extraParams.callBack({...});

　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　this.props.navigator.pop();

　　　　　　　　　　　　}

 

　　　　　　　　}

　　　　　示例:

　　　　

 1 /**
 2  * Created by Administrator on 2016/4/4.
 3  * Navigator组件使用,在App入口页面定义Navigator
 4  */
 5 import React,{
 6     AppRegister,
 7     Platform,
 8     BackAndroid,
 9     Navigator,
10     Component,
11 
12 } from 'react-native';
13 import { Provider } from 'react-redux';
14 import store from './redux/store';
15 import Splash from './pages/Splash';
16 
17 class  App extends  Component {
18     componentWillMount (){
19         if(Platform.OS==='android'){
20             BackAndroid.addEventListener('hardwareBackPress',this.onBackAndroid);
21         }
22     }
23     componentWillUnmout (){
24         if(Platform.OS==='android'){
25             BackAndroid.addEventListener('hardwareBackPress',this.onBackAndroid);
26 
27         }
28     }
29     onBackAndroid (){
30         const nav=this.navigator;
31         const routers=nav.getCurrentRoutes();
32         if(routers.length>1){
33             nav.pop();
34             return true;
35         }
36         return false;
37     }
38     /*初始路由*/
39     initialRoute ={
40         component:Splash,
41     };
42     /*路由切换特效*/
43     configureScene (){
44         if(Platform.OS==='ios'){
45             return Navigator.SceneConfigs.PushFromRight;
46         }
47         return Navigator.SceneConfigs.FloatFromBottom;
48 
49     }
50     /*定义下一个路由*/
51     renderScene (route,navigator){
52         const Component=route.component;
53         return (
54             <Component {...route.params} navigator={navigator}/>
55         );
56     }
57     render(){
58         return (
59             <Provider store={store} key="provider">
60                 <Navigator
61                     ref={nav => {this.navigator=nav}}
62                     initialRoute={this.initialRoute}
63                     configureScene={() =>this.configureScene()}
64                     renderScene={(route,navigator) =>this.renderScene(route,navigator)}
65                 />
66 
67             </Provider>
68         );
69     }
70 
71 }
72 AppRegister.register('MyProject',() => App);

View Code