React native路由跳转navigate、push、replace的区别

摘要:
下一步,B页面push了一个B页面,此时为何不使用navigate呢,因为栈内若已经存在一个相同页面,navigate就会失去跳转页面的效果,BnavigateB代码不会报错,但是也不会进行跳转,因为栈内已经有了B,只有使用push才会进行新的B页面进行入栈操作。现在了解了navigate与push的区别,看上图,进行了一系列入栈操作,形成最终的栈图,下面分三种情况讨论。

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

React native路由跳转navigate、push、replace的区别第1张

如上图,外部是一个栈容器,此时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的区别》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇设置linux文件权限,使得同一用户组的可以在文件夹内自由增删文件(夹)linux 把任务放到后台下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue实用技巧

路由缓存 keepalive keep-alive 是 Vue 提供的一个抽象组件,用来对组件进行缓存,从而节省性能,由于是一个抽象组件,所以在 v 页面渲染完毕后不会被渲染成一个 DOM 元素。 <keep-alive> <router-view></router-view> </keep-alive>...

微服务网关3-配置路由和跨域

一、基本配置 1、路由和断言 在application.yml文件中添加路由配置 -:表示数组元素,可以配置多个节点 id:配置的唯一标识,可以和微服务同名,也可以起别的名字,区别于其他 Route。 uri:路由指向的目的地 uri,即客户端请求最终被转发到的微服务。 predicates:断言的作用是进行条件判断,只有断言都返回真,才会真正的执行路由...

react异步数据如ajax请求应该放在哪个生命周期?

react请求接口数据是在componentDidMount 还是componentWillMount周期好?React数据获取为什么一定要在componentDidMount里面调用? 对于同步的状态改变,是可以放在componentWillMount,对于异步的,最好好放在componentDidMount。但如果此时有若干细节需要处理,比如你的组件需...

简单的react下拉框多选效果

import React from "react"; class Test4 extends React.Component { constructor(props) { super(props); this.state = { value: "coconut", arr: [], options:...

最全前端资源汇集(引)

综合类地址 前端知识体系http://www.cnblogs.com/sb1987... 前端知识结构https://github.com/JacksonTia... Web前端开发大系概览https://github.com/unruledboy... Web前端开发大系概览-中文版http://www.cnblogs.com/unrule... Web...

OpenWrt 路由系统上抓包

版权声明:本文为博主原创文章。未经博主同意不得转载。 https://blog.csdn.net/qianguozheng/article/details/32108093 前言: 做路由器开发,难免会遇到抓包的情况,可是抓包须要有Hub或者无线抓包网卡,调试无线问题。且眼下手中没有无线抓包网卡,怎么办?那不能分析无线连接建立的过程,我们就...