背景:
在做项目时使用React-Navigation进行页面管理。有两个需求

1:在我的中进入界面,从主界面A进入B,B进入C,C进入D,在D中点击返回键要求直接返回到A中。
2:从当前的通讯录中的一个页面跳转到我的中的一个子页面,但是当点击这个子页面的返回键时,他会返回到我的中的上一个界面,而不是通讯录中的那个页面。

一:goBack返回到指定页面

分析:
React-Navigation中,他是通过栈的形式进行页面管理的。简单的描述一下,首先通过createBottomTabNavigator创建一个BottomTabNavigator并指定每一个Tab的首页,就是上图所示的底部导航栏。之后通过createStackNavigator为每一个Tab创建stack,并将这个Tab中的所有的页面放进去。在进行页面切换时,他是以栈帧的进出的形式进行管理的。
如图:是真tm的丑。

如图:从A进入B就相当于是在栈中增加栈帧B。类似的,进入到D中之后,他会将CD这两个栈帧都放到栈中进行管理。如果点击默认的返回键,就相当于是将栈帧推出栈。同样的推出也是一个一个推出。此时想要从D一步返回到A,该怎么搞????
如果只是简单的调用goBack函数,并且在括号内填写routeName,那么是绝对不会生效的,相信看到这篇文章的人,这个坑都已经走过了。
接下来看一下React-Navigation官方文档中对于goBack()的解释:

如果想返回到特定的页面,需要获取到相应的SCREEN_KEY。而不是routeName。这个SCREEN_KEY是怎么获取的?要获取哪一个页面的SCREEN_KEY呢?
接下来就解决上面的两个问题:
1:使用navigation.state.key就可以获取到当前页面的SCREEN_KEYstate表示屏幕当前的状态或者是路线。根据官网所描述,他将会返回一个对象,对象中包含三个属性,分别是key,params,routeName
2:知道了如何去获取SCREEN_KEY,那接下来该获取哪个页面的SCREEN_KEY呢????
在上面对官网的截图也已经说的很明白了navigation.goBack(SCREEN_KEY_B) // will go to screen A from screen B。从页面B返回到页面A需要获取到页面B的SCREEN_KEY。因此如果我想从D直接一步返回到页面A中需要在D中调用goBack函数时使用B的SCREEN_KEY作为参数。
上代码:
1:在B页面通过对子组件传值的方式将当前页面的key一步一步的传输到D页面中:

<AllDynamicComments backKey={this.props.navigation.state.key}/>

2:在D页面通过设置navigationOptions来将导航栏进行设置,同时定义一个函数设置goBack()函数,:

 // 定义navigationOPtions,设置标题栏的返回按钮static navigationOptions = ((props) => {return {headerBackTitle: null,headerLeft: (<TouchableOpacity onPress={props.navigation.state.params.backTest}><Image style={Styles.profileMarginRight20} source={require('../../../../img/threePoints.png')} /></TouchableOpacity>)}})
// 定义函数
backTest = () => {this.props.navigation.goBack(this.props.navigation.getParam('backKey', ''))}// 使用生命周期函数进行setParams,保证在navigationOptions中可以使用backTest函数componentDidMount () {this.props.navigation.setParams({ backTest: this.backTest })}

额外解释一下:
由于从前一个页面是通过navigation.navigate(action,params)这种方式将backKey传过来的,所以取值时也应该使用this.props.navigation.getParam('backKey', '') 这种方式取值。
此时点击D页面的返回键就可以直接从D跳回A。

二:不同栈之间的页面跳转之后的返回


在左边的stack中通过(1)进入右边的stack中的最上面的栈帧,当点击返回键时希望他能够通过(2)跳转到返回原页面,但是他是通过(3)返回到上一个页面的。
发现自己真的SB -_-。尝试了好多的方法,有push,还有goBack()。但是后来想了一下React-Navigation的设计思想,他是通过栈的形式进行页面的管理。他们是在不同的stack中的,因此不在一个圈子,怎么能相互串门?只能是肉包子打狗,有去无回,没有往来的。
上代码:

const LeftStack = createStackNavigator({LeftScreen1: { screen:  LeftScreen1, navigationOptions: { headerTitle: ' LeftScreen1' } },LeftScreen2: { screen: LeftScreen2, navigationOptions: { headerTitle: ' LeftScreen2' } }
})
const RightStack = createStackNavigator({RightScreen1: { screen: RightScreen1, navigationOptions: { headerTitle: 'RightScreen1' } },RightScreen2: { screen: RightScreen2, navigationOptions: { headerTitle: 'RightScreen2' } }
})

LeftScreen2进入到RightScreen2但是返回的时候是返回不到LeftScreen2中的。因此直接在上边加上RightScreen2的栈帧就OK了!!! 我靠。我TM…

const LeftStack = createStackNavigator({LeftScreen1: { screen:  LeftScreen1, navigationOptions: { headerTitle: ' LeftScreen1' } },LeftScreen2: { screen: LeftScreen2, navigationOptions: { headerTitle: ' LeftScreen2' } },RightScreen2: { screen: RightScreen2, navigationOptions: { headerTitle: 'RightScreen2' } }
})
const RightStack = createStackNavigator({RightScreen1: { screen: RightScreen1, navigationOptions: { headerTitle: 'RightScreen1' } },RightScreen2: { screen: RightScreen2, navigationOptions: { headerTitle: 'RightScreen2' } }
})

这样,RightScreen2就可以和LeftScreen1LeftScreen2融为一体了。成为了一个圈子的个体了。相互之间是有来往了。这样就搞定了。

总结

1:在使用时,多了解一下涉及思想,有时就可以将复杂问题简单化。
2:使用goBack返回页面和navigate跳转到指定页面,对页面的影响是不同的,猜测可能会引起重新渲染。等问题,惭愧的是我并没有深究这个问题。
3:有帮助的stackoverflow文章链接:
https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working
4:有帮助的csdn文章链接:
https://blog.csdn.net/noahchen666_qq_com/article/details/80452058
5:非常感谢帮助,如有错误感谢指正

React-Navigation的goBack()跳转到指定页面,以及不同栈之间的页面的返回操作相关推荐

  1. react navigation 中使用goBack()跳转到指定页面

    一.适用场景: 在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A-->B-->C-->D 要想从D页面直接返回到B页 ...

  2. js 跳转到指定位置 高德地图_在H5页面内通过地址调起高德地图实现导航

    项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...

  3. RN路由-React Navigation组件5.x-基本原理(中文文档)

    ##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...

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

    goBack 首先, 现在看一下react navigation官网中对goBack的描述: goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所 ...

  5. 使用Redux在React Navigation App中管理状态

    by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...

  6. React Navigation 基本使用

    React Navigation 基本使用 参考资料 https://reactnavigation.org/docs/ 环境搭建 Minimum requirementsreact-native & ...

  7. 微信小程序左上角返回按钮跳转到指定页面

    微信小程序开发交流qq群   173683895    承接微信小程序开发.扫码加微信. 在当前页面的 onUnload 执行页面跳转 onUnload: function () {wx.reLaun ...

  8. mysql页码_PHP+MySQL实现输入页码跳转到指定页面功能示例

    本文实例讲述了php+mysql实现输入页码跳转到指定页面功能.分享给大家供大家参考,具体如下: 一.代码 conn.php: $id=mysql_connect("localhost&qu ...

  9. 文本编辑器实现跳转到指定行的功能

    文章目录 1 文本编辑器实现跳转到指定行的功能 1 文本编辑器实现跳转到指定行的功能 用户需求: 提供输入对话框. 用户可输入目标行号. 确定后光标跳转到指定行. 行间跳转算法设计: 通过输入对话框获 ...

最新文章

  1. IE9开始支持SVG格式(VML终结)
  2. python基础教程视频(全13集)-Python基础视频教程(600集)【传智播客精品教程】...
  3. 计算机软件硬件试讲,试讲:初识计算机网络
  4. C/C++ 常量的定义与应用(编程中的常量)
  5. Xml文件保存值不能及时更新
  6. python二级考试真题_2020年海南二级建造师考试《建筑工程》真题及答案_二级建造师...
  7. 请投量子位一票 | 2018年度明星学术公众号评选
  8. 水晶报表合并模块部署指南(.Net2.0,VS2005)
  9. FZU1977 Pandora adventure —— 插头DP
  10. MyBatis sql查询字段问题
  11. 高德地图输入地址获取经纬度_不打开地图也能获取地址-利用百度地图API和Python实现...
  12. 几何画板椭圆九种画法_椭圆的画法几何画板的动画演示
  13. 考研基础高等数学笔记
  14. 零基础学DevOps必看教程,带你10分钟快速实战入门DevOps
  15. 【研报】医美行业产业投资宝典:颜值新经济,美丽无止境——附下载链接
  16. 自己做量化交易软件(12)通通量化AI框架的使用1-与通通AI对话聊天
  17. Hyper-V虚拟机安装Linux后修改Linux的屏幕分辨率
  18. Ext JS框架入门
  19. 针对前端js加密解密方法的兼容问题(兼容ie5以上哦)
  20. 记一次国内投德国IT工作机会

热门文章

  1. ffmpeg命令行使用
  2. 解决win10下PPT打不开,显示内容有问题,提示修复但修复不成功
  3. 西弗勒斯·斯内普 ---混血王子
  4. 后现代婚礼机器人显神通_看机器人“各显神通”
  5. 基于单片机电梯5层带模拟控制系统设计(毕设)
  6. 华为服务器系统重装,华为服务器 重装系统
  7. 华为服务器自检信息怎么开,hp服务器开机自检报错提示
  8. 增益和偏移的概念_2 理解与校准 ADC 系统的偏移和增益误差
  9. PostgreSQL汉字转拼音
  10. oracle8616,ORACLE11G-数据库备份恢复之RMAN全库备份恢复