react-native - 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' })]
 }));