React-Navigation 3在嵌套堆栈中重置

Question

我尝试了解如何在嵌套堆栈中重置这是我的代码

    const AuthStack = createStackNavigator(
      {
        Welcome,
        Login,
        Register,
        ConfirmationCode,
      },
      {
        initialRouteName: 'Welcome',
        headerMode: 'none',
        lazy: true,
        transitionConfig,
        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )
    const AppStack = createStackNavigator(
      {
        TabStack,
        SearchResult,
        BusinessDetail,
        BusinessMap,
        MakeAppointment,
        TermsAndConditions
      },
      {
        initialRouteName: 'TabStack',
        headerMode: 'none',
        lazy: true,
        transitionConfig,
        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )
    let MainStack = createSwitchNavigator(
      {
        AuthLoading,
        Auth: AuthStack,
        App: AppStack,
      },
      {
        initialRouteName: 'AuthLoading',
        headerMode: 'none',
        lazy: true,
        defaultNavigationOptions: {
          gesturesEnabled: false,
        },
      }
    )

tabstack

    import React from 'react';
    import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
    import {
        Search,
        MyFavourites,
        MyAppointments,
        UserProfile
    } from '../screens'
    import Icon from 'react-native-vector-icons/Feather';
    import Colors from '../utils/Colors'
    let TabStack = createBottomTabNavigator(
      {
        Search,
         MyFavourites,
         MyAppointments,
         UserProfile,
      },
        initialRouteName: 'ScreenTab1',
        tabBarOptions: {
          activeTintColor: Colors.pink,
          inactiveTintColor: Colors.black,
          showLabel: false,
          style: {
            backgroundColor: 'white'
          }
        },
      }
    )
    export default createAppContainer(TabStack);

我想了解如何重置：

    reset from UserProfile to TabStack (in AppStack) to AuthStack

我试图这样做

const resetAction = StackActions.reset({
        index: 0,
        actions: [NavigationActions.navigate({ routeName: 'AuthStack' })],
    });
    this.props.navigation.dispatch(resetAction);

或这种方式

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

但是我有错误

没有针对Authstack的路由

我检查了Stackoverflow中的问题，但答案对我不起作用，请始终向我展示我在上面写的同样的错误。

Answer 1

您的 resetAction是不成功的，因为您在TabStack上派遣了它（因为如果我正确地让您在UserProfile上调用this.props.navigation.dispatch）。您需要将resetAction转到MainStack。此线程在这里提出了一些您可以实现这一目标的方法。而且，这是我首选的解决方案，因为我不必通过导航器围绕导航器或调用多个嵌套动作。

1. 创建一个具有以下内容的navigationService.js（以保持顶级导航器作为参考）

import { NavigationActions, StackActions } from 'react-navigation';
let _navigator;
function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}
function navigateMainNavigator(routeName, params) {
  _navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    }),
  );
}
// add other navigation functions that you need and export them
export default {
  setTopLevelNavigator,
  navigateMainNavigator,
};

2. 在您的App.js或您渲染的MainStack的任何其他文件上，请这样做以设置参考

import NavigationService from './navigationService';
...
render() {
  return (
    ...
    <MainStack
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
    />
    ...
  )
}

3. 无论您什么时候要重设AuthStack（或MainStack中的任何其他堆栈），只需导入NavigationService并致电

NavigationService.navigateAndReset('Auth', {...yourParamsIfAny});
// 'Auth' because you named it that way in your 'MainStack'

====================================================================================

编辑

在navigationService.js中，以前的解决方案用于StackNavigator作为MainStack

function navigateAndReset(routeName, params) {
  _navigator.dispatch(
    StackActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({
          routeName,
          params,
        }),
      ],
    })
  );
}

Answer 2

尝试将其设置为AppStack，因为无论如何它将重定向到GeneralStack，因为您将其作为initialRouteName中的AppStack

将其重定向

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

Answer 3

您可以执行以下操作，重置为authStack，

创建一个如下的重置操作，

const resetAction = StackActions.reset({
  index: 0,
  actions: [NavigationActions.navigate({ routeName: "AuthStack" })],
  key: null
});
this.props.navigation.dispatch(resetAction);

，还将authstack添加到AppStack或您调用上述代码的堆栈中。

例如，如果您从AppStack调用此功能，请在应用程序堆栈中添加以下行作为路由

  const AppStack = createStackNavigator(
  {
    TabStack,
    SearchResult,
    BusinessDetail,
    BusinessMap,
    MakeAppointment,
    TermsAndConditions,
    AuthStack <---Insert THIS
  },

在使用签名时，这对我有用。