如何关闭包含多个屏幕的React Navigation模式

Question

我正在使用https://reactnavigation.org/在React Native应用程序中进行导航，其中选项卡导航器作为主堆栈，并且在模式中具有两个屏幕（用于登录和配置应用程序）。

我一辈子都想不通如何从第二个屏幕（SelectItems）关闭模态。在模式的第一个屏幕中，我可以用关闭它navigation.goBack()。

两个模式屏幕都需要一个关闭按钮。有没有一种方法可以返回到用户所在的任何标签页？

在此先感谢您的帮助。

const Tabs = TabNavigator(
  {
    Search: { screen: Search },
    Settings: { screen: Settings }
  }
);

// modal with two screens
const Setup = StackNavigator(
  {
    Login: {
      screen: Login
    },
    SelectItems: {
      screen: SelectItems
    }
  },
  {
    initialRouteName: 'Login'
  }
);

const RootStack = StackNavigator(
  {
    Main: {
      screen: Tabs
    },
    Setup: {
      screen: Setup
    }
  },
  {
    mode: 'modal',
    headerMode: 'none'
  }
);

Answer 1

这是我在 2022 年使用 v6 的解决方案。它关闭模式并导航离开，没有任何奇怪的行为（至少在我的情况下）。

onPress = () => {
    navigation.goBack(); // <-- this fixed it
    navigation.navigate("SomeScreen", { id: 123});
}

Answer 2

我找到了一个解决方案，但这并不完美。

您可以使用popToTop，它将返回到堆栈的第一个场景，然后goBack将关闭模式。

navigation.popToTop();
navigation.goBack(null);

这样做的问题是它将再次装入堆栈的第一个场景，因此请确保不要setState在willMount或didMount中使用它。或防止它。

这就是我现在要使用的解决方案。我一直在寻找更好的解决方案。

Answer 3

react-navigation 5.x 简单易用的解决方案

navigation.dangerouslyGetParent()?.goBack();

这是有效的，因为它抓住了导航器的父级，这是模态和您想要关闭的。

从 react-navigation 的文档来看，它实际上并不危险：

该函数被称为危险的GetParent 的原因是警告开发人员不要过度使用它，例如。获取父级的父级和其他难以遵循的模式。