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

分手后的思念是犯贱 2022-03-21 04:59 447阅读 0赞

**背景：**  
在做项目时使用`React-Navigation`进行页面管理。有两个需求  
![在这里插入图片描述][20190130164813847.png]  
1:在**我的**中进入界面，从主界面A进入B，B进入C，C进入D，在D中点击返回键要求直接返回到A中。  
2:从当前的**通讯录**中的一个页面跳转到**我的**中的一个子页面，但是当点击这个子页面的返回键时，他会返回到**我的**中的上一个界面，而不是**通讯录**中的那个页面。

## 一：goBack返回到指定页面 ##

**分析：**  
在`React-Navigation`中，他是通过栈的形式进行页面管理的。简单的描述一下，首先通过`createBottomTabNavigator`创建一个`BottomTabNavigator`并指定每一个`Tab`的首页，就是上图所示的底部导航栏。之后通过`createStackNavigator`为每一个`Tab`创建`stack`，并将这个`Tab`中的所有的页面放进去。在进行页面切换时，他是以栈帧的进出的形式进行管理的。  
**如图**：是真tm的丑。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]  
如图：从A进入B就相当于是在栈中增加栈帧B。类似的，进入到D中之后，他会将CD这两个栈帧都放到栈中进行管理。如果点击默认的返回键，就相当于是将栈帧推出栈。同样的推出也是一个一个推出。此时想要从D一步返回到A，该怎么搞？？？？  
如果只是简单的调用`goBack`函数，并且在括号内填写`routeName`，那么是绝对不会生效的，相信看到这篇文章的人，这个坑都已经走过了。  
接下来看一下`React-Navigation`官方文档中对于`goBack（）`的解释：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 1]  
如果想返回到特定的页面，需要获取到相应的`SCREEN_KEY`。而不是`routeName`。这个`SCREEN_KEY`是怎么获取的？要获取哪一个页面的`SCREEN_KEY`呢？  
接下来就解决上面的两个问题：  
1:使用`navigation.state.key`就可以获取到当前页面的`SCREEN_KEY`。`state`表示屏幕当前的状态或者是路线。根据官网所描述，他将会返回一个对象，对象中包含三个属性，分别是`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页面中：

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。

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 2]  
在左边的`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`就可以和`LeftScreen1`，`LeftScreen2`融为一体了。成为了一个圈子的个体了。相互之间是有来往了。这样就搞定了。

## 总结 ##

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

[20190130164813847.png]: /images/20220321/57c1e1171d144cce89314092ed03e8fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70]: /images/20220321/103036d75aa24e0d908151512305dcbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 1]: /images/20220321/fe8ddc965516438ba6c148f0c8e222ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bl9Eb25nTGlhbmc_size_16_color_FFFFFF_t_70 2]: /images/20220321/b7e0167f8b5b400ab57b9487e6d30b47.png
[https_stackoverflow.com_questions_45489343_react-navigation-back-and-goback-not-working]: https://stackoverflow.com/questions/45489343/react-navigation-back-and-goback-not-working
[https_blog.csdn.net_noahchen666_qq_com_article_details_80452058]: https://blog.csdn.net/noahchen666_qq_com/article/details/80452058