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