реакция-навигация 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

Вы можете сделать следующее, чтобы сбросить до authStack,

, создать действия сброса следующим образом,

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

, а также добавить AuthStack в appStack или стек изкоторый вы вызываете вышеупомянутый код.

Например, если вы вызываете это из вашего стека приложений, добавьте следующую строку в качестве маршрута в стек вашего приложения

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

Это работает для меня при использованиичтобы выйти.

Answer 2

Ваш resetAction неудачен, потому что вы отправляете его на TabStack (потому что вы звоните this.props.navigation.dispatch на UserProfile, если я вас правильно понял).Вам нужно отправить 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,
};

На вашем App.js или любом другом файле, который вы визуализируете на MainStack, сделайте это, чтобы установить ссылку

import NavigationService from './navigationService';

...

render() {
  return (

    ...
    <MainStack
      ref={navigatorRef => {
        NavigationService.setTopLevelNavigator(navigatorRef);
      }}
    />
    ...

  )
}

И где бы вы ни захотели сбросить на 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 3

Попробуйте установить его на AppStack, потому что в любом случае оно будет перенаправлено на GeneralStack, поскольку у вас есть initialRouteName внутри AppStack

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