React-Navigation(二)，goBack的使用(两级)

假设

假设有三个页面A、B、C，栈中是A->B->C，即A页面跳转至B页面，B页面跳转至C页面；
（现实场景中的例子A:普通页面，B:登录页面，C:注册页面）
在pop的过程中，C pop-> B , B pop-> A都很轻松，在使用了 React-Navigation后，在相应的screen页面拿到navigation,调用其goBack方法就能实现页面回退:

    popMethod(){this.props.navigation.gaBack();}

需求

现实场景中的问题:
假设： A:普通页面，B:登录页面，C:注册页面
未注册用户在A页面触发了需登录的操作，跳转至B页面，由于未注册再跳转至C页面注册，即A->B->C；
用户注册完成后部分App会自动帮用户登录，回到触发登录的页面A，即C pop-> A

问题

在官方文档:https://reactnavigation.org/docs/navigators/navigation-prop 中有介绍goBack的使用:

屏幕快照 2017-08-30 下午3.07.43.png

依照官方文档，goBack方法可以再带上一个参数（实际测试中goBack与goBack(null) 效果相同，都是回到前一个页面）,实现回退到指定的页面。

可是当指定回到主页面即Home时，没有作用，甚至没有任何响应

  popMethod(){this.props.navigation.gaBack('Home');}

思路

于是寻找解决办法：http://www.jianshu.com/p/81fbd5ad28d8 ，感谢记录

发现原来goBack中指定的页面并不是我们在一开始指定的routerName，而是key，该作者通过修改源代码完成使用指定routerName来实现回退。
本着不想修改源代码的想法，既然要key，就找一下key，打印出navigation看看他是什么：

屏幕快照 2017-08-30 下午2.43.03.png

原来navigation中有5个属性
1、dispatch：用来分发方法的，回调、修改也可以通过dispatch完成
2、goBack:回退的方法，很清楚的看到，参数是key
3、navigate：跳转到新页面的方法，参数是：路由名、参数、方法（看来下次还可以在这个方法中填加些回调，实现些小逻辑）
4、setParams：顾名思义，改变自己的参数了
5、state: 自己的参数和属性就在这了，很高兴在这里看到了一个key !,（state中的params中还有一个key是我在前一个页面中传进来的）

解决

既然拿到了A页面的key，也就可以愉快的从C页面回退至A页面了，然后在很愉快的在C页面调用

pop(){ this.props.navigation.goBack(this.props.navigation.state.params.key);
}

然而并没有用

注意

于是想起了作者所说的，从C pop-> A，需要用的是B的key，于是把B的key传给C，再试一次，真的可以回退至A了

总结：

在A页面跳转B时直接跳转

poshToB{this.props.navigation.navigate('B')
}

在B页面跳转C时，将自己的key传给C

poshToC{const { navigate } = this.props.navigation;navigate('B',{key:this.props.navigation.state.key});
}

在C要回退至A时调用:

popA{this.props.navigation.goBack(this.props.navigation.state.params.key
}

React-Navigation(二)，goBack的使用(两级)相关推荐

数据库模式（三级模式+两级映射）
数据库模式(三级模式+两级映射) 美国国家标准协会(American National Standard Institute, ANSI)的数据库管理系统研究小组于1978年提出了标准 ...
react navigation 中使用goBack()跳转到指定页面
一.适用场景: 在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A-->B-->C-->D 要想从D页面直接返回到B页 ...
Unity3D热更新全书-脚本(二) 两级分化
原地址:http://www.cnblogs.com/crazylights/p/3886840.html 上篇明确了我们探讨的脚本是什么:是写在文本文件里面的代码,可以作为资源加载,取得字符串再执行 ...
react navigation中使用goBack返回指定页面
goBack 首先, 现在看一下react navigation官网中对goBack的描述: goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所 ...
C++动态内存分配---两级allocator设计与实现(二)
引言前文提到allocator类将new操作符内存的分配与对象的构造或delete操作符对象的析构和内存的释放分为两个阶段.内存的分配拟和释放分别由::allocate()和::deallocat ...
RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...
使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
React Navigation 基本使用
React Navigation 基本使用参考资料 https://reactnavigation.org/docs/ 环境搭建 Minimum requirementsreact-native & ...
【学习笔记】第三章——内存 II（分页存储、快表与局部性原理、两级页表）
文章目录一. 分页存储概念二. 地址转换 1)为什么页面大小为2的次幂? 三. 页表 1)页表项长度.页号"隐含" 四. 局部性原理与快表五. 二级页表 1)单级页表存在的问 ...

React-Navigation(二)，goBack的使用(两级)

假设

需求

问题

思路

于是寻找解决办法：http://www.jianshu.com/p/81fbd5ad28d8 ，感谢记录

解决

注意

总结：

React-Navigation(二)，goBack的使用(两级)相关推荐

最新文章

热门文章