React Native 从导航堆栈中清除上一个屏幕

Question

我正在开发一个用于学习目的的 React 本机应用程序。我现在正在使用 React Navigation 实现导航。我正在使用堆栈导航。但是我找不到从导航历史记录中删除上一个屏幕并杀死该应用程序的方法。

我像这样设置了我的导航。

const AppStack = createStackNavigator({
  Login: {
    screen: Login
  },
  Register: {
    screen: Register
  },
  Events: {
    screen: Events
  }
});

正如您在上面的代码中看到的，我默认打开登录屏幕。登录后，我像这样打开事件屏幕。

this.props.navigation.navigate('Events');

问题是，当我在事件页面上时，我可以在导航栏中看到后退按钮。当我按下它时，我被带回了登录页面。

但我想要的是，登录后，我想从堆栈中删除登录页面。当我在事件页面上时，当我单击后退按钮时，该应用程序应该被关闭。也许它可能没有后退按钮。在这种情况下，它就像第一个屏幕一样。我该怎么做？

Answer 1

成功完成登录或注册后，您必须重置导航堆栈，如下所示，

import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName: 'Events' })],
});
this.props.navigation.dispatch(resetAction)

此外，在Event页面中，如果您不希望标题在那里，则必须添加一个静态方法。

static navigationOptions = navigation => ({
        header: null
});

希望对您有所帮助。

Answer 2

在版本 V5 及更高

版本中

this.props.navigation.reset({
        index: 0,
        routes: [{name: 'Events'}],
      });

<小时 />

在功能组件中使用钩子，

import {useNavigation} from '@react-navigation/native';
const navigation = useNavigation();
navigation.reset({
        index: 0,
        routes: [{name: 'Events'}],
      });

Answer 3

> 2021 年更新：

这是一个更简单的解决方案：

this.props.navigation.replace("Events");

这会将当前屏幕替换为新屏幕，同时将任何以前的屏幕保留在导航堆栈中。

发人深思的东西

理想情况下，您将使用最佳实践并执行以下操作：

import * as ROUTES from "../routes/constants"
this.props.navigation.replace(ROUTES.EVENTS);

其中routes/constants.js ，

const EVENTS = "Events";
...
export {
    EVENTS,
    ...
};

Answer 4

在 V5.x 中，我们有reset方法

navigation.reset({
  index: 0,
  routes: [{ name: 'ScreenName' }],
});

Answer 5

您需要的是重置功能

import {NavigationActions} from 'react-navigation';
this.props.navigation.dispatch(NavigationActions.reset({
     index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'Events' })]
 }));

Answer 6

import {StackActions, NavigationActions} from 'react-navigation';
this.props.navigation.dispatch(StackActions.reset({
     index: 0, key: null, actions: [NavigationActions.navigate({ routeName: 'Events' })]
 }));