react-navigation没有Props的情况下如何使用goBack()

思路概述

react-navigation是由官方推荐的用于react-native的路由组件。在一般情况下，如果我们想要进行页面跳转，就要先从props里面取出Navigation，再利用其中的navigate()方法跳转。

然而在某些特殊的情况下，我们没法在组件内部进行路由操作。针对这种情况，官方提供了一套解决方案，大致原理是将路由栈的对象保存起来，这样在没有Props的情况下，就可以从保存的地方将其取出来直接使用。

关于没有props的情况下，如何进行跳转的方法，详见官方文档。

然而，保存起来的路由栈并不等同于props里面的navigation，比我们在组件里面直接调用goback()可以返回上一个页面，但全局保存的路由栈却没法这样使用。后来查看官方文档，发现goBack函数还有一个可选参数，那就是页面的key（可以理解为react-navigation给页面自动生成的唯一标识）。

于是我猜想组件中的navigation之所以可以直接调用goback()，是因为react-navigation已经默认将当前路由的key传了进去。而当我们通过路由栈的对象使用goback()时，也需要传递页面的key进去才行。

知道原因就很好解决了，只要我们手动获得当前页面的key然后传递进去goBack方法就好。在控制台打印一下路由栈对象，可以看到里面有一个_navigator.state.nav.routes属性，路由名称和key都存放在routes这个数组中。有了key的话，接下来怎么做就不用多说了吧。

操作步骤

1. 把路由栈保存到全局

首先按照官方文档的教程，把路由栈存起来。

2.复制下面的代码。

//官方教程中创建的NavigationService.js
//...这里省略官方教程中的代码

function goBack(key) {
  let routes=_navigator.state.nav.routes;
  let currentPageKey=routes[routes.length-1].key;
  _navigator._navigation.goBack(key||currentPageKey);
}

export default {
  //...其他函数
  goBack
};

3. 使用方法

import NavigationService from '第二步里面的代码所在文件路径';
// ...
NavigationService.goBack();  //也可以传入其他路由的key，不传的话默认从当前路由返回上一个页面