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