react navigation中使用goBack返回指定页面

2024-06-17 23:04:47

goBack

首先, 现在看一下react navigation官网中对goBack的描述:

goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所以参数填routeName无法跳转, goBack如果不带参数(即key为undefined)会返回上一个页面, 这个参数key不是目标页面的key, 而是可以在key为undefined时goBack到目标页面的那个页面的key. 如果key为null, 那么会回到任何地方.

可以结合下面链接中的Answer理解:
https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working

如果有 A -> B -> C -> D 四个页面,
如果想从D回到B, 在react navigation不集成Redux的情况下, 需要在C通过this.props.navigation.state.key 拿到C的key, 然后把C的key传入到D中, 然后在D中执行this.props.navigation.goBack("C页面的key")就可回到B页面.

显然这样不太方便, 所以最好将Redux集成到react navigation中(react navigaiton官网中有集成方法,在这我就不赘述了).
集成了redux后, 可以在connect中拿到所有加载过的页面的route, 如:

class ResetPassword extends Component {...render() {const { routes } = this.props;console.log(routes);return (...)}
}export default connect ((state) => ({routes: state.nav.routes})
)(ResetPassword)

为什么不使用navigate返回?

使用navigate()方法返回页面会使StackNavigator的结构乱掉, 导致跳转到目标页面后, 对页面组件的重新渲染会出问题.

react navigation中使用goBack返回指定页面相关推荐

react 返回一个页面_react-navigation goBack返回指定页面
重新看了下文档屏幕快照 2018-09-12 下午2.33.39.png 所以只需要this.props.navigation.navigate('xxx')这样就可以了,下边方法没用了 1.问题 ...
react navigation 中使用goBack()跳转到指定页面
一.适用场景: 在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A-->B-->C-->D 要想从D页面直接返回到B页 ...
微信小程序扫一扫左上角按钮返回指定页面
微信小程序官方文档中有两个参数,success就是正常扫一扫之后要执行的操作,如果进入到扫一扫页面想要点击左上角返回指定页面,可以在fail中书写页面跳转.
【转】React 16 中从 setState 返回 null 的妙用
概述在 React 16 中为了防止不必要的 DOM 更新,允许你决定是否让 .setState 更来新状态.在调用 .setState 时返回 null 将不再触发更新. 我们将通过重构一个 mo ...
在 React 16 中从 setState 返回 null 的妙用
翻译:疯狂的技术宅原文:blog.logrocket.com/returning-n- 未经允许严禁转载概述在 React 16 中为了防止不必要的 DOM 更新,允许你决定是否让 .setSt ...
微信公众号开发之返回按钮返回指定页面
之前有种简单的方法处理,但是现在不支持了,代码如下: document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() ...
如何实现点击微信内置浏览器返回按钮，返回指定页面，或者原地刷新
$(function(){function pushHistory() {var state = {title: "title",url: "#"};windo ...
Android微信支付，支付成功后并返回指定页面
我们知道调用微信,支付宝支付,都是在那个页面上调起支付的,支付完成或失败后又会回到该页面上.下面我就介绍一下支付成功或失败后跳转到你想要的页面 1.首先你得在微信开发者平台上申请微信开发者账号AppI ...
RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...

最新文章

热门文章