为什么 Navigation.goBack() 不能正常工作？

Question

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

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

这里有什么问题。

请帮助我谢谢。

Answer 1

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

发生这种情况是因为您使用的是 DrawerNavigation，它不会在您浏览时创建屏幕历史记录。

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

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

Answer 2

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

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

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

NOTE: Use .goBack(null) if your goal is to return to any place without specifying a closing target.

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

例子

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

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

Answer 3

您可以在 Drawer.Navigator 中指定 backBehavior="history" 并且它不会再将您移动到 ​​goBack 的初始根目录:)

示例：

 <Drawer.Navigator
      backBehavior="history"
    >
...