美文网首页
react-navigation在Redux下多页面跳转

react-navigation在Redux下多页面跳转

作者: 以德扶人 | 来源:发表于2017-11-10 12:56 被阅读871次

    react-navigation目前是RN必备的导航,正常的单级跳转 返回 传值 只要按官方的方法即可,或者参考兔神的文章。但是项目中往往需要用到多级跳转,这个时候就需要花点功夫了。

    在正常情况下要多级跳需要改源代码,相当不方便,这里是基于redux环境的跳转。

    首先,在要跳转的页面导入:

    import { NavigationActions } from 'react-navigation'
    

    然后,在跳转的方法里面:

    等需要操作的方法执行完之后:
    const resetAction = NavigationActions.reset({
                                    index: 0,
                                    actions: [
                                        NavigationActions.navigate({ routeName: 'Main'})
                                    ]
                                })
                                this.props.navigation.dispatch(resetAction)
    
    

    我这边demo是执行退出方法,将路由重置,这样用户登录后下次进来就是首页了。
    index是指tabbar的第一个选项,routeName就是定义的页面名字,可以根据自身的需求进行页面跳转。

    所以,大概方法就是如此拉。

    --------------- 补充 ---------------
    在导航v2.0以上的版本,方法有所变化
    import { StackActions,NavigationActions } from 'react-navigation';
    const resetAction = StackActions.reset()

    reset的执行文件改了下

    相关文章

      网友评论

          本文标题:react-navigation在Redux下多页面跳转

          本文链接:https://www.haomeiwen.com/subject/rbhbmxtx.html