从抽屉中重置反应导航堆栈

Question

在官方react-navigationgithub:https://github.com/react-community/react-navigation/issues上打开了很多问题，但没有人给出真正的解决方案，包括一篇帖子说“看看这个问题，很多问题”：https://github.com/react-community/react-navigation/issues/691没有答案。

基本上：我有一个 DrawerNavigator 和一些嵌套的 StackNavigator。

export const MainNavigator = DrawerNavigator(
    {
        OrderNew: {
            screen: OrderNew,
            navigationOptions: {
                drawerLabel: DrawerLabel('New Order')
            }
        },
        Orders: {
            screen: OrderNavigator, //a StackNavigator
            navigationOptions: {
                drawerLabel: DrawerLabel('Orders')
            }
        },
        MenuNavigator: {
            screen: MenuNavigator, //a StackNavigator
            navigationOptions: {
                drawerLabel: DrawerLabel('Menu')
            }
        },
    //more screens...
    {
        initialRouteName: 'Orders',
        drawerPosition: 'right',
        contentComponent: props => <ScrollView style={{backgroundColor: 'rgba(227, 100, 29, .95)'}}><DrawerMenu state={props} /></ScrollView>,
    }
);

所以，我要传递一个带有我自己的菜单组件的contentComponent。我的想法是覆盖DrawerItems组件的onItemPress事件并将我的逻辑放在这里。

我想要的是：我想在用户每次按下该项目时重置 MenuNavigator（和其他堆栈屏幕）。我只是无法做到这一点。正如我所说，我尝试了很多代码。其实是这样的：

onItemPress={
    router => {
        const navigateAction = NavigationActions.navigate({
            routeName: router.route.routeName,
        });

        this.props.state.navigation.dispatch(navigateAction);
    }
}

上面的代码有效，我可以浏览抽屉项目。现在，在我的脑海中，我应该将一个子动作重置传递给导航器上的第一个项目。所以我尝试了：

onItemPress={
    router => {
        const navigateAction = NavigationActions.navigate({
            routeName: router.route.routeName,
            action: NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({routeName: router.route.routes[0].routeName}),
                ]
            })
        });

        this.props.state.navigation.dispatch(navigateAction);
    }
}

并爆出一个错误：

没有为键菜单定义路由。 必须是以下之一：'Orders'、'OrderClient'

总结：当我导航到另一个DrawerNavigator 的项目时，如何重置StackNavigator？

Answer 1

您缺少密钥：null。

导航操作应该是这样的。

 action: NavigationActions.reset({
                index: 0,
                key: null,   
                actions: [
                    NavigationActions.navigate({routeName: router.route.routes[0].routeName}),
                ]
            })