为什么 Navigation.goBack() 无法正常工作？答案

【问题标题】：Why Navigation.goBack() not working properly?为什么 Navigation.goBack() 无法正常工作？
【发布时间】：2019-07-27 13:43:03
【问题描述】：

我正在使用以下方式创建导航系统

StackNavigator -> DrawerNavigator ->（屏幕 A、屏幕 B、屏幕 C）

屏幕A是初始路线

使用屏幕 A 到屏幕 B

this.props.navigation.navigate("Screen B")  //Working Fine

使用屏幕 B 到屏幕 C

this.props.navigation.navigate("Screen C")  //Working Fine

在屏幕 C 中

this.props.navigation.goBack() //Not Working

但是

this.props.navigation.goBack(null) //It's going to Screen A instead of Screen B

这里有什么问题。

请帮帮我，谢谢。

【问题讨论】：

标签： react-native react-navigation react-navigation-stack react-navigation-drawer

【解决方案1】：

由于你没有展示抽屉的导航结构，我不知道3个屏幕是如何放在里面的。我假设它们是 3 个不同的抽屉屏幕

发生这种情况是因为您使用的是 DrawerNavigation，当您在其中导航时不会创建屏幕历史记录。

要解决这个问题，您必须将导航结构更改为：

DrawerNavigation => StackNavigator => Screen A, B, C

【讨论】：

如果我将屏幕放在 StackNavigator 中，如何设置drawerLockMode: "locked-closed"？

【解决方案2】：

正如上面的答案，抽屉导航器不在堆栈中，所以你无法分辨你的旅程路径。

goBack() 的 key 属性是一个动态创建的字符串，由 react-navigation 在导航到新路线时创建。

这些堆栈键存储在this.props.navigation.state

注意：如果您的目标是返回任何地方，请使用.goBack(null) 没有指定结束目标。

像这个例子一样，你可以添加到堆栈中。

示例

const Drawers = createDrawerNavigator(
  {
    A: {
      screen: HomeScreen
    },
   ...
  },
  {
    initialRouteName: "A"
  }
);

const RootStack = createStackNavigator(
  {
    Drawers: {
      screen: Drawers
    },
    otherStack: {
      screen: otherStack
    },
    ....

【讨论】：