React-Native在登陆成功或注销后销毁路由,只保留当前栈

前言

在移动APP中,我们经常会遇到登陆成功,或者注销后,不允许返回上一页面,这就需要我们清楚栈中的其余view, RN中我们应该如何处理呢?

方法

主要原理是借助于onDidFocus和immediatelyResetRouteStack两个方法实现。

对此我们先看看Navigator提供给我们默认的方法有哪些?

  • 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到栈中的第一个场景,卸载掉所有的其他场景。

在具体使用中,我们需要添加一个onDidFocus属相,然后判断当前路由是否要求重置整个线路。

<Navigator
    ref="navigator"
    initialRoute={{name: ‘LaunchView‘}}
    renderScene={this.renderScene}
    configureScene={this.configureScene}
    onDidFocus={(route) => {
        if (route.reset) {                    this.refs.navigator.immediatelyResetRouteStack([{ name: route.name }])
        }
}}
/>

使用方法:

this.props.navigator.push({name: ‘yourview Name‘,reset:true});

ok,搞定了!

时间: 2024-10-05 17:51:11

React-Native在登陆成功或注销后销毁路由,只保留当前栈的相关文章

React Native升级指南|v0.40+升级适配经验与心得

尊重版权,未经授权不得转载 本文出自:http://blog.csdn.net/fengyuzhengfan/article/details/54585899 React Native作为一个有上千开发者参与的开源项目,自从2015年3月27日第一版发布以来到现在已经有147次版本发布了,平均起来几乎每周都会有新的版本发布.随着一次次版本的迭代,React Native也逐渐稳定,版本发布频率保持在了每一到两周一次.新版本不停的迭代对于React Native开发者来说,及时升级React Na

React Native Android 源码框架浅析(主流程及 Java 与 JS 双边通信)

[工匠若水 http://blog.csdn.net/yanbober 未经允许严禁转载,请尊重作者劳动成果.私信联系我] 1 背景 有了前面<React Native Android 从学车到补胎和成功发车经历>和<React Native Android Gradle 编译流程浅析>两篇文章的学习我们 React Native 已经能够基本接入处理一些事情了,那接下来的事情就是渐渐理解 RN 框架的一些东西,以便裁剪和对 RN 有个更深入的认识,所以本篇总结了我这段时间阅读源码

react native 问题点

问题点一:安装了react-native-vector-icons后,编译出错 版本: "react": "16.2.0", "react-native": "0.52.0", "react-native-button": "^2.2.0","react-native-router-flux": "^4.0.0-beta.28", "re

基于React Native的跨三端应用架构实践

作者|陈子涵 编辑|覃云 “一次编写, 到处运行”(Write once, run anywhere ) 是很多前端团队孜孜以求的目标.实现这个目标,不但能以最快的速度,将应用推广到各个渠道,而且还能节省大量人力物力. React Native 的推出,为跨平台的开发带来了新的曙光. 虽然 Facebook 官方 blog 的说法 React Native 支持“Learn once, write anywhere.”. 但经过开源社区的不断努力,React Native 已经可以达到“一次编写

react native ScrollView

ScrollView是一个通用的可滚动的容器,你可以在其中放入多个组件和视图,而且这些组件并不需要是同类型的.ScrollView不仅可以垂直滚动,还能水平滚动(通过horizontal属性来设置). import React, { Component } from 'react'; import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native' class IScrolledDownAndWhatHappened

谈谈 React Native

前言 几天前,Facebook 在 React.js Conf 2015 大会上推出了 React Native(  视频链接).我发了一条微博(  地址),结果引来了 100 多次转发.为什么 React Native 会引来如此多的关注呢?我在这里谈谈我对 React Native 的理解. 一个新框架的出现总是为了解决现有的一些问题,那么对于现在的移动开发者来说,到底有哪些问题 React Native 能涉及呢? 人才稀缺的问题 首先的问题是:移动开发人才的稀缺.看看那些培训班出来的人吧

React Native组件的结构和生命周期

React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导入组件 1.2 导入API 1.3 导入自定义组件 2.组件的声明 组件的生命分为组件的定义和样式.组件的定义有各种组件的组成结构.方法的定义. 2.1 组件的定义 2.2 组件样式 组件样式的定义可以直接在组件的定义中的style中定义.但是对于样式复杂的组件需要组件样式. 3.组件的注册或导出

转【唐巧】的谈谈 React Native

前言 几天前,Facebook 在 React.js Conf 2015 大会上推出了 React Native(视频链接).我发了一条微博(地址),结果引来了 100 多次转发.为什么 React Native 会引来如此多的关注呢?我在这里谈谈我对 React Native 的理解. 一个新框架的出现总是为了解决现有的一些问题,那么对于现在的移动开发者来说,到底有哪些问题 React Native 能涉及呢? 人才稀缺的问题 首先的问题是:移动开发人才的稀缺.看看那些培训班出来的人吧,经过

React Native与React的关系及特点

一.React.React.js和React Native的关系 React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或网页. 在React之上发展出了React.js框架用来开发网页,发展出来React Native用来开发移动应用. 因为React基础框架与React.js框架是同时出现.同时进化发展的,就造成了React基础框架的基本概念.设计思想都是在React.js的相关文档中描述的. 后来,Facebook推出React Native后,也没有把React