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

 

上一篇:mssql 2008 复制订阅


下一篇:Android代码混淆及项目发布步骤记录