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
}