我们RN的路由导航Navigator使用攻略

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

就可以了