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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM