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

爱被打了一巴掌 2023-07-13 15:26 15阅读 0赞

## 假设 ##

假设有三个页面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][https_reactnavigation.org_docs_navigators_navigation-prop] 中有介绍goBack的使用:

![format_png][]

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

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

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

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

## 思路 ##

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

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

![format_png 1][]

屏幕快照 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
    }

[https_reactnavigation.org_docs_navigators_navigation-prop]: https://link.jianshu.com?t=https://reactnavigation.org/docs/navigators/navigation-prop
[format_png]: /images/20230529/84c6f88609cc40619e615a152bd4ba19.png
[http_www.jianshu.com_p_81fbd5ad28d8]: https://www.jianshu.com/p/81fbd5ad28d8
[format_png 1]: /images/20230529/ee1110bbc3b743d0b60c2a470db40194.png