反应原生清除堆栈导航器堆栈

Question

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

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

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

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

Answer 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'}],
      });

Answer 2

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

如何使用索引参数

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

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)

Answer 3

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

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

Answer 4

如果你使用react-navigation@<=4你可以使用 Switch Navigator。

您使用createSwitchNavigator. 这样的导航器不会叠加您的导航。将您的身份验证屏幕/导航器添加到带有主屏幕/堆栈的切换导航器中。

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

有关更多信息：https :
//reactnavigation.org/docs/4.x/auth-flow/

Answer 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。