由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下:

如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时用navigate没有用push呢,因为在栈内没有B页面时,用navigate和push是一样的,都是进行入栈操作,没有区别,出于习惯使用navigate。下一步,B页面push了一个B页面,此时为何不使用navigate呢,因为栈内若已经存在一个相同页面,navigate就会失去跳转页面的效果,B navigate B代码不会报错,但是也不会进行跳转,因为栈内已经有了B,只有使用push才会进行新的B页面进行入栈操作。现在了解了navigate与push的区别,看上图,进行了一系列入栈操作,形成最终的栈图,下面分三种情况讨论。

1.现在我们处于C页面,若C push A,同样会执行A的继续入栈,但此时若使用C navigate A,则A以上全部页面会执行出栈操作,相当于popToTop方法,回到A页面;

2.现在处于C页面,若C push B,同样会执行B的继续入栈,但此时若使用C navigate B,则会当前的C开始向下寻找B界面,直到找到最近的B界面,进行跳转,C与B中间的页面全部出栈,此时B还可以继续进行返回,一步步返回至A页面;

3.还有一种与图无关的情况,A navigate BrowserPage,此时app接收到一个推送,点击推送进入了新的BrowserPage,若收到推送后跳转页面的逻辑使用的是navigate方法,此时就会出现无法跳转的情况,因为BrowserPage已经在栈内存在(刚刚在浏览网页),所以此处要使用push方法进行入栈操作;

4.A页面navigate B页面,A收到通知要navigate到C界面,此时C入栈并覆盖了B,此时点击返回是回到B界面,因为C执行出栈操作后到了B,而不会直接回到A;

5.replace方法,

  • replace - replace the current route with a new one

  据官方文档介绍,是用一个新的路由替换掉当前的路由,即使用新的页面替换当前的页面,假设有这样的场景,A navigate到B,B完成任务后要到C,C返回的不是B,而是A,此时使用B replace C即可实现需求。

以上就是对几种跳转方法的粗略介绍,欢迎指出问题。

React native路由跳转navigate、push、replace的区别的更多相关文章

  1. [RN] React Native 滚动跳转到指定位置

    React Native 滚动跳转到指定位置 一.结构 <ScrollView horizontal={true} ref={(view) => { this.myScrollView = ...

  2. [RN] React Native FlatList跳转到顶部/底部

    React Native FlatList跳转到顶部/底部 核心代码如下: <ScrollView showsVerticalScrollIndicator={false} contentCon ...

  3. react中路由跳转push与replace的区别

    路由跳转,replace / push 区别 push: a-b-c 可以回到上一级 例: this.props.history.push('路由地址') replace: a-b-c 回不到上一级 ...

  4. react native 页面跳转

    React Native目前有几个内置的导航器组件,一般来说我们首推Navigator.它使用纯JavaScript实现了一个导航栈,因此可以跨平台工作 场景简单来说其实就是一个全屏的React组件. ...

  5. angular2 Router类中的路由跳转navigate

    navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...

  6. react native jpush跳转页面不成功解决方法

    在点击事件时加入如下红色代码即可 import JPushModule from 'jpush-react-native'; ... componentDidMount() { // 新版本必需写回调 ...

  7. react native 1跳2 2跳3 3跳4 4pop回2

    网上有介绍导航的很多了 就不一一说了   直接说一个小功能 popToRoute pop回指定页面  第一次写 组织能力不是特别好 直接贴代码 例如 我们有四个页面  从第四个pop到第二个页面  先 ...

  8. 关于react native 路由传值及回调方法的理解

    提示:本路由需要通过 this.props.navigation.state.params 获取上一路由传过来的值

  9. React Native学习(三)—— 使用导航器Navigation跳转页面

    本文基于React Native 0.52 参考文档https://reactnavigation.org/docs/navigators/navigation-prop 一.基础 1.三种类型 Ta ...

随机推荐

  1. 用cgroup限制内存以防止Linux因内存用尽卡死

    Linux在内存用尽的情况下,整个界面,包括tty和ctrl-alt-F1都会卡住难以响应.虽然Linux内核有OOM Killer机制杀掉吃内存的进程,但经常内存用尽时连OOM Killer都无法动 ...

  2. mac保存远程链接

    安装sshpass,前提是已经安装好iterm2 下载地址:http://sourceforge.net/projects/sshpass/files/ 百度网盘:https://pan.baidu. ...

  3. jquery1.9+,jquery1.10+ 为什么不支持live方法了?

    live() 替换成 on() die()  替换成off() 根据jQuery的官方描述,live方法在1.7中已经不建议使用,在1.9中删除了这个方法.并建议在以后的代码中使用on方法来替代. o ...

  4. Linux命令行扩展和被括起来的集合

    命令行扩展:`` 和 $() 单引号'' 双引号"" 反向单引号`` 在很多场景下效果不同 [root@centos8 ~]#echo "echo $HOSTNAME&q ...

  5. zookeeper核心之ZAB协议就这么简单!

    背景 我们都知道 Zookeeper 是基于 ZAB 协议实现的,在介绍 ZAB 协议之前,先回顾一下 Zookeeper 的起源与发展. Zookeeper 究竟是在什么样的时代背景下被提出?为了解 ...

  6. node初学

    安装node.js 往往需要解析环境,但是现在直接安装时就已经配置好了, cmd打开 输入cd/ 在输入node -v   显示版本号 Node与php比较:https://www.techug.co ...

  7. WSL2和CUDA踩坑

    WSL2和CUDA踩坑   WSL2里可以直接跑cuda了, 目前(2020年10月) 功能可用, 但bug很多, 不够完善     1. 安装     主要参考: https://docs.nvid ...

  8. spring cloud oauth2 实现用户认证登录

    spring-cloud-oauth2 实现用户认证及单点登录 需求 ​ 在微服务架构中,我们有很多业务模块,每个模块都需要有用户认证,权限校验.有时候也会接入来自第三方厂商的应用.要求是只登录一次, ...

  9. Redis学习笔记(六)——数据结构之Set

    一.介绍 Redis的Set是string类型的无序集合.集合成员是唯一的,这就意味着集合中不能出现重复的数据. Redis中集合是通过哈希表实现的,所以添加.删除.查找的复杂度都是O(1). 集合中 ...

  10. Java学习的第五天

    1.值域转化的规则:值域小的类型可以自动转化成值域大的类型,值域大的类型可以强行转化成值域小的类型,但要注意精度,除了基本类型可以转换,引用类型之间也可以转换. 引用类型可以是类,借口,数组. 常见的 ...