用户注销时重置主StackNavigator？

Question

我正在构建一个react本机应用程序，用户功能登录注销。

当用户从系统注销并在登录屏幕上移动时，我想重置我的主要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,
};

提前致谢！ :)

Answer 1

你的resetAction不成功，因为你将动作发送到OrderStack。您需要将resetAction发送到您的RootStack。 This thread here提出了一些有趣的方法，你可以实现这一点，阅读。

而且，这是我的首选解决方案。因为这样，我不必在导航器周围传递道具或调用多个嵌套操作。

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});