Сбросить основной StackNavigator при выходе пользователя из системы?

Question

Я создаю собственное приложение реагирования, в котором есть функции входа пользователя в систему.

Я хочу сбросить мой основной StackNavigator при выходе пользователя из системы и переходе на экран входа в систему.

У меня возникает проблема, когда я сбрасываю свой основной StackNavigator из меню ящика.

вот мой код,

const OrderStack = createStackNavigator({
    Orders: {
        screen: Orders,
    },
    OrderDetails: {
        screen: OrderDetails,
    },
    DeliveryStatus: {
        screen: DeliveryStatus,
    },
    DeliveryInstructions: {
        screen: DeliveryInstructions,
    },
    ProductDetails: {
        screen: ProductDetails,
    },
});

const DrawerNavigations = createDrawerNavigator({
    Home: OrderStack,
    Location: {
        screen: createStackNavigator({
            Location: {
                screen: Location,
            },
        }),
    }
});
const RootStack = createStackNavigator(
    {
        Login: {
            screen: Login,
        },
        Home: {
            screen: DrawerNavigations,
        }
    },
    {
        initialRouteName: 'Login',
        headerMode: 'none',
        navigationOptions: {
            headerVisible: false,
        }
    },
);


const AppNavigator = createAppContainer(RootStack);

export default class Main extends Component{
    render() {
        return (
            <AppNavigator
                ref={navigatorRef => {
                    NavigationService.setTopLevelNavigator(navigatorRef);
                }}
            />
        )
    }
}

мой logout код кнопки,

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

navigationService.js

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

let _navigator;

function setTopLevelNavigator(navigatorRef) {
    _navigator = navigatorRef;
}

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

export default {
    setTopLevelNavigator,
    navigateAndReset,
};

Спасибо в Advanced!:)

Answer 1

Ваш resetAction неудачен, потому что вы отправляете действие на OrderStack. Вам нужно отправить resetAction на ваш RootStack. В этой теме предложено несколько интересных способов, с помощью которых вы можете это сделать, прочитайте.

А также, вот мое предпочтительное решение. Потому что при этом мне не нужно передавать реквизиты навигаторам или вызывать несколько вложенных действий.

1. Создайте navigationService.js со следующим содержимым (чтобы сохранить навигатор верхнего уровня для справки)

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

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

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

// add other navigation functions that you need and export them

export default {
  setTopLevelNavigator,
  navigateAndReset,
};

2. На вашем App.js или любом другом файле, который вы визуализируете на AppNavigator (или RootStack), импортируйте NavigationService и установите ссылку на ваш AppNavigator

import NavigationService from './navigationService';

...

render() {
  return (

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

  )
}

3. И где бы вы ни захотели вернуться на страницу Login, просто импортируйте NavigationService и звоните

NavigationService.navigateAndReset('Login', {...yourParamsIfAny});