Question

我在React Native应用程序中使用https://reactnavigation.org/进行导航，其中标签导航器作为主堆栈，其中包含两个屏幕的模式（用于登录和配置应用程序）。

我不能为我的生活弄清楚如何从第二个屏幕（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

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

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

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

问题在于它会再次挂载堆栈的第一个场景，所以请确保在willMount或didMount中不使用setState。或者防止它。

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

Answer 2

React-navigation 5.x的简单解决方案

navigation.dangerouslyGetParent()?.goBack();

之所以行之有效，是因为它抓住了导航器的父级，这是模态和您想关闭的内容。

Answer 3

https://github.com/react-navigation/react-navigation/issues/686#issuecomment-342766039的原始解决方案，已针对React Navigation 4更新：

创建一个DismissableStackNavigator：

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
export default function DismissableStackNavigator(routes, options) {

  const StackNav = createStackNavigator(routes, options);

  const DismissableStackNav = ({navigation, screenProps}) => {
    const { state, goBack } = navigation;
    const props = {
      ...screenProps,
      dismiss: () => goBack(state.key),
    };

    return (
      <StackNav
        screenProps={props}
        navigation={navigation}
      />
    );
  }

  DismissableStackNav.router = StackNav.router;
  return DismissableStackNav;
};

用法：

创建堆栈：

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

在屏幕上调用navigation.dismiss，以关闭模式堆栈。

Answer 4

我试图自己解决这个问题，最终使用的解决方案是使用navigation.navigate()

示例this.props.navigation.navigate('name of screen you want to go');

希望这会有所帮助！

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

4 个答案: