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();

　　　　　　　　　　　　}

 

　　　　　　　　}

　　　　　示例:

　　　　

/**
 * Created by Administrator on 2016/4/4.
 * Navigator組件使用,在App入口頁面定義Navigator
 */
import React,{
    AppRegister,
    Platform,
    BackAndroid,
    Navigator,
    Component,

} from 'react-native';
import { Provider } from 'react-redux';
import store from './redux/store';
import Splash from './pages/Splash';

class  App extends  Component {
    componentWillMount (){
        if(Platform.OS==='android'){
            BackAndroid.addEventListener('hardwareBackPress',this.onBackAndroid);
        }
    }
    componentWillUnmout (){
        if(Platform.OS==='android'){
            BackAndroid.addEventListener('hardwareBackPress',this.onBackAndroid);

        }
    }
    onBackAndroid (){
        const nav=this.navigator;
        const routers=nav.getCurrentRoutes();
        if(routers.length>1){
            nav.pop();
            return true;
        }
        return false;
    }
    /*初始路由*/
    initialRoute ={
        component:Splash,
    };
    /*路由切換特效*/
    configureScene (){
        if(Platform.OS==='ios'){
            return Navigator.SceneConfigs.PushFromRight;
        }
        return Navigator.SceneConfigs.FloatFromBottom;

    }
    /*定義下一個路由*/
    renderScene (route,navigator){
        const Component=route.component;
        return (
            <Component {...route.params} navigator={navigator}/>
        );
    }
    render(){
        return (
            <Provider store={store} key="provider">
                <Navigator
                    ref={nav => {this.navigator=nav}}
                    initialRoute={this.initialRoute}
                    configureScene={() =>this.configureScene()}
                    renderScene={(route,navigator) =>this.renderScene(route,navigator)}
                />

            </Provider>
        );
    }

}
AppRegister.register('MyProject',() => App);