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

Question

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

我这样设置导航。

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

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

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

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

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

原文由 Wai Yan Hein 发布，翻译遵循 CC BY-SA 4.0 许可协议

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
});

希望它会帮助你。

原文由 Hardik Virani 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您需要的是重置功能

import {NavigationActions} from 'react-navigation';

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

原文由 DNA.h 发布，翻译遵循 CC BY-SA 4.0 许可协议