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 {NavigationActions} from 'react-navigation';

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

Answer 2

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

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 3

import {StackActions, NavigationActions} from 'react-navigation';

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

Answer 4

从 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 5

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

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

Answer 6

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,
    ...
};