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

Z时代
2024-01-10
分类：综合

react

背景：

在做项目时使用React-Navigation进行页面管理。有两个需求

1:在我的中进入界面，从主界面A进入B，B进入C，C进入D，在D中点击返回键要求直接返回到A中。

2:从当前的通讯录中的一个页面跳转到我的中的一个子页面，但是当点击这个子页面的返回键时，他会返回到我的中的上一个界面，而不是通讯录中的那个页面。

一：goBack返回到指定页面

分析：

在React-Navigation中，他是通过栈的形式进行页面管理的。简单的描述一下，首先通过createBottomTabNavigator创建一个BottomTabNavigator并指定每一个Tab的首页，就是上图所示的底部导航栏。之后通过createStackNavigator为每一个Tab创建stack，并将这个Tab中的所有的页面放进去。在进行页面切换时，他是以栈帧的进出的形式进行管理的。
如图：是真tm的丑。

如图：从A进入B就相当于是在栈中增加栈帧B。类似的，进入到D中之后，他会将CD这两个栈帧都放到栈中进行管理。如果点击默认的返回键，就相当于是将栈帧推出栈。同样的推出也是一个一个推出。此时想要从D一步返回到A，该怎么搞？？？？

如果只是简单的调用goBack函数，并且在括号内填写routeName，那么是绝对不会生效的，相信看到这篇文章的人，这个坑都已经走过了。

接下来看一下React-Navigation官方文档中对于goBack（）的解释：

如果想返回到特定的页面，需要获取到相应的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页面中：

<AllDynamicComments backKey={this.props.navigation.state.key}/>

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。

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

在左边的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融为一体了。成为了一个圈子的个体了。相互之间是有来往了。这样就搞定了。