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