问题描述

不知道你有没有遇到过这样的需求：当你在浏览一篇新闻准备写评论时，从新闻页面跳转 —> 写评论的页面，写完之后自动跳转 —> 评论区。假如此时你触发返回按钮，通常情况下是会返回到写评论的页面，因为它才是逻辑上的前一页面，那么不想要跳到这个页面，而是直接跳回新闻页面的话要怎么做呢？这就是我们今天的主题，GIF示例：

WeChat_20181229152314.gif

解决

根据官网描述，这才是goBack('XXX')的正确用法：goBack('这里不是你定义的组件名称，而想要跳过的页面的key值')。
如果有这么一个需求：

有 A 、 B 、 C 三个页面
如果想从A --> B --> C --> A

1、

只需要在B中取出key值this.props.navigation.state.key（这里需要特别注意的是navigation只会传递给直接在StackNavigation中定义的组件，具体可看我另一篇文章(https://www.jianshu.com/p/836fee32b036)），再从B到C时将key值传过去

2、

在C页面就可以使用this.props.navigation.goBack(this.props.navigation.state.params.key)来跳过这个页面了（this.props.navigation.state.params用于获取页面跳转的传过来的参数，而后面的key是你在B页面自定义的变量名）

3、

做完1、2步，这时你的组件就可以跳过B页面直接返回A了，但是这时候可别忘了处理物理返回键（如果你想做我GIF中那种，titleBar有返回键，安卓手机又自带物理返回键），从react native引入API：BackHandler。在C组件中：

  componentDidMount() {
    BackHandler.addEventListener("handleBack", this._handleBack）
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("handleBack", this._handleBack）
//组件卸载时一定要将事件注销！！
  }

  handleBack = () => {
    this.props.navigation.goBack(this.props.navigation.state.params.key)
    return true;      
  }

结语

很开心今天又解决了项目中的一个问题，趁着记忆很深，立马将它记录下来，并分享给大家，希望这篇文章能给你提供一些思路