21

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

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

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

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

6 回答 6

40

在 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'}],
      });
于 2020-07-19T12:13:43.027 回答
9

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

如何使用索引参数

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

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)
于 2017-09-21T09:54:02.610 回答
6 
import {NavigationActions} from 'react-navigation';                
const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: 'HomeScreen'})
    ] })
this.props.navigation.dispatch(resetAction);

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

于 2017-12-05T10:58:57.093 回答
5

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

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

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

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

于 2018-07-19T09:33:08.270 回答
2

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

于 2021-01-17T16:40:39.807 回答
0

//进口

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

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

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

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

this.props.navigation.dispatch(loginScreenAction)
于 2020-09-01T12:57:30.080 回答