我们RN的路由导航Navigator使用攻略
关于版本问题是0.43版本及以前都有Navigator,以后版本都是React Navigator,
之后假如还需要用Navigator的话就要首先下载:
npm i react-native-deprecated-custom-components --save
然后自动配置一下:
先输入:react-native-deprecated-custom-components link
再输入:npm link
最后引入使用:import { Navigator } from 'react-native-deprecated-custom-components'
使用方法如下:(注意下边有简单写法,用那个)
1、首先建立几个RN jsx页面并在路由字典页面引入,每个页面注意一定要export default 否则不可以在别的页面import引入
2、建立一个Routers对象
const Routers = {
get page1(){
return {title:'第一页',index:1 }; // 单个路由对象 title神马的可以自己定义也可以是name
},
get page2(){
return {title:'第二页',index:2};
},
get page3(){
return {title:'第三页',index:3};
}
}
module.exports = Routers; //将Routers对外开放
3、引入创建Navigator标签,里面包含这么几个参数
!!!注意,最外层容器view一定要给一个高度,或flex:1,,否则一定会有问题,页面一片惨白,啥都木有,亲测!!!!!!!!!!!!
<View style={{flex:1}}> //一定不要忘记给外层容器添加一个高度或flex:1
<Navigator
configureScene={(route, routeStack) => Navigator.SceneConfigs.VerticalUpSwipeJump} //进场滑动方式
initialRoute={Routers.page1} //默认首页面
renderScene={(router, nav) => this.renderSecene(router, nav)} //每当导航器发生改 变的时候调用的渲染方法
onDidFocus={(router)=>that.renderTitle(router)} //每次切换渲染完毕执行的方法
/>
</View>
4、renderScene={(router, nav) => this.renderSecene(router, nav)} 渲染条件方法,也就是我们以前常提的路由字典。。。
getScene(route, navigator){
this.nav = navigator; //当前页面如果想操作导航器也需要开放出去。。。
switch (route.index){
case Routers.page1.index: //根据index值区分不同的页面
return (
<Page1 nav={navigator}/> //如果想让别的页面也可以操作导航器对象,需要把navigator对象作为参数传递过去,另一边用props接收一下就好了
);
break;
case Routers.page2.index:
return (
<Page2 nav={navigator}/>
);
break;
case Routers.page3.index:
return (
<Page3 nav={navigator}/>
);
break;
}
}
//关于导航器的操作
this.nav.push(Routers.page2) //跳转到page2页面 路由对象入栈
this.nav.pop(); //返回上一个页面,路由对象出栈
关于导航方法总结:
getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。
jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
jumpTo(route) - 跳转到已有的场景并且不卸载。
push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
pop() - 跳转回去并且卸载掉当前场景
replace(route) - 用一个新的路由替换掉当前场景
replaceAtIndex(route, index) - 替换掉指定序列的路由场景
replacePrevious(route) - 替换掉之前的场景
resetTo(route) - 跳转到新的场景,并且重置整个路由栈
immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
popToRoute(route) - pop到路由指定的场景,在整个路由栈中,处于指定场景之后的场景将会被卸载。
popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。
//关于页面切换的动画的方法configureScene:
(route, routeStack) => Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.PushFromRight (默认)
Navigator.SceneConfigs.FloatFromRight
Navigator.SceneConfigs.FloatFromLeft
Navigator.SceneConfigs.FloatFromBottom
Navigator.SceneConfigs.FloatFromBottomAndroid
Navigator.SceneConfigs.FadeAndroid
Navigator.SceneConfigs.HorizontalSwipeJump
Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
Navigator.SceneConfigs.VerticalUpSwipeJump
Navigator.SceneConfigs.VerticalDownSwipeJump
///
最后又来了一个简单写法,现在都不用上面这种繁杂的写法了,写法如下:
第1步不变,
第二步,有所改变,在routers.js中引入所有的导航页面
Import Page1 from ‘./page1’;
........
然后配置路由对象的时候有点改变:
Export default{
Page1:{title:'第一页',index:1 , scene:Page1},
Page2:{title:'第二页',index:2 , scene:Page2},
Page3:{title:'第三页',index:3 , scene:Page3},
}
然后到导航页面使用路由
Import Routers from ‘./routers.js’
最后标签里修改参数renderScene
renderScene={(router, nav) => <router.scene nav={nav} routers={Routers}/>}
省去了一大堆配置路由字典的代码比原本的,是不是很神奇,然后路由跳转的页面使用路由的方法:
首先把传过去的 nav对象跟 routers对象接收到
var nav = this.props.nav;
Var routers = this.props.routers;
Nav.push(routers.Page2);
就可以了