React 本机清除 Stack Navigator 堆栈答案

【问题标题】：React native clear Stack Navigator stackReact 本机清除 Stack Navigator 堆栈
【发布时间】：2017-09-21 09:42:16
【问题描述】：

我有几个屏幕可以一一浏览。屏幕1->屏幕2-屏幕3->屏幕4-首页

我想要的是当我回家时，应该清除以前的导航历史记录，并且后退按钮不应该转到最后一个导航屏幕，即屏幕 4。目前，当我在主屏幕上按下后退按钮时，我需要回到堆栈中的最后一条路线，即screen4。我使用了下面的代码。它给了我错误，没有定义路由或关键主页。我已经在 Screens 类中定义了它。任何帮助将不胜感激。

const resetAction = NavigationActions.reset({
  index: 0,                       
  actions: [NavigationActions.navigate({ routeName: 'Home' })],
});

onPress={() =>  this.props.navigation.dispatch(resetAction)}

【问题讨论】：

请参阅此处接受的答案以获取截至今天的更新信息。 stackoverflow.com/questions/50443451/…

标签： javascript react-native react-navigation stack-navigator

【解决方案1】：

在 V5 中，您可以使用

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

使用钩子

import {useNavigation} from '@react-navigation/native';

const navigation = useNavigation();

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

【讨论】：

【解决方案2】：

正如react-navigation docs for reset action 中所述，索引应该是当前活动路由的索引。错误可能与此有关。

如何使用索引参数

索引参数用于指定当前活动路线。例如：给定一个带有两个的基本堆栈导航路由配置文件和设置。将状态重置到一个点活动屏幕是设置，但将其堆叠在配置文件的顶部屏幕，您将执行以下操作：

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'}),
    NavigationActions.navigate({ routeName: 'Settings'})
  ]
})
this.props.navigation.dispatch(resetAction)

【讨论】：

如何获取当前索引？
@ParasWatts 您可以使用Screen Tracking 功能获取当前状态和路线索引。
@bennygenel 链接断开，reactnavigation.org/docs/en/screen-tracking.html 是否相同？

【解决方案3】：

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

你可以用这个，这对我有用..

【讨论】：

【解决方案4】：

如果您使用 react-navigation@，您可以使用 Switch Navigator。

您使用createSwitchNavigator 创建一个 Switch Navigator。这样的导航器不会叠加您的导航。在带有主屏幕/堆栈的 Switch Navigator 中添加您的身份验证屏幕/导航器。

这样，当您从家导航登录时，不会保留堆栈。

【讨论】：

之前不可用
在版本 5 中不可用

【解决方案5】：

使用@react-navigation 5.x，您可以使用CommonActions 重置/清除堆栈。我会在这里留下一个例子。

import { CommonActions } from '@react-navigation/native';

const handleSigninNavigation = () => {
 navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [{ name: "your-new-route" }]
  }));
}

您还可以在重置堆栈时创建自己的堆栈。只需将路线的名称传递给路线数组并给出一个索引以首先导航。

CommonActions.reset({
  index: 1,
  routes: [{ name: "home" }, { name: "signin" }]
}));

上面的代码将使用给定的路由重置当前堆栈，并将导航到signin，因为我们将索引设置为 1。

【讨论】：

【解决方案6】：

//导入

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

//重置当前导航栈并创建新的导航栈

const loginScreenAction = StackActions.reset({
    index: 0,                       
    actions: [NavigationActions.navigate({ routeName: 'LoginScreen' })],
});

//用新的导航栈打开新组件

this.props.navigation.dispatch(loginScreenAction)

【讨论】：