React Native清除Stack Navigator堆栈

Question

我有几个屏幕，我一个接一个地浏览。Screen1->screen2-screen3->screen4-Home

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

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

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

- Paras Watts

---

请参考此处的已接受答案，以获取截至今日的最新信息。https://dev59.com/Z6vka4cB1Zd3GeqPuoma - srisaiswaroop

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

- Rajesh N

Answer 2

根据react-navigation重置操作文档所述，索引应该是当前活动路由的索引。错误可能与此有关。

如何使用索引参数

索引参数用于指定当前活动路线。例如：给定包含两个路线Profile和Settings的基本堆栈导航。要将状态重置为一个点，其中活动屏幕是Settings但它又叠加在Profile屏幕上，则应执行以下操作：

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)

- bennygenel

---

如何获取当前索引？ - Paras Watts

@ParasWatts 您可以使用屏幕跟踪功能来获取当前状态和路由的索引。 - bennygenel

@bennygenel的链接已经失效了，https://reactnavigation.org/docs/en/screen-tracking.html 这个链接是同一个页面吗？ - ashishdhiman2007

Answer 3

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

你可以使用这个方法，这对我有效。

- Fazeel Qureshi

Answer 4

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

- Charitha Goonewardena

Answer 5

如果您使用的是react-navigation@<=4，则可以使用Switch Navigator。

使用createSwitchNavigator创建Switch Navigator。 这样的导航器不会堆叠您的导航。 将您的授权屏幕/导航器添加到Switch Navigator中，以及主屏幕/堆栈。

这样，当您从主页导航到登录时，堆栈不会被保留。

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

- Nelson Bassey

---

之前不可用。 - Paras Watts

在版本5中不可用。 - Jeaf Gilbert

Answer 6

通过类型化的路由和它们的参数

type StateRoute<Route extends keyof MyNavigatorParamList> = {
  name: Route;
  params: MyNavigatorParamList[Route];
};

const toNavigationStateRoutes = <Route extends keyof MyNavigatorParamList>(
  ...routes: StateRoute<Route>[]
) => routes;

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: toNavigationStateRoutes(
      {
        name: 'Home',
        params: undefined,
      },
      {
        name: 'Some screen',
        params: { id: "..." },
      },
    ),
  }),
);

- Hayden

Answer 7

//导入

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

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

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

//打开一个新的组件并使用新的导航栈

this.props.navigation.dispatch(loginScreenAction)

- Harikesh