从抽屉重置反应导航堆栈

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使用我自己的菜单组件.我的想法是覆盖组件的onItemPress事件DrawerItems并将我的逻辑放在这里.

我想要的是: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);
    }
}

并爆炸出错:

没有为键菜单定义路径.必须是以下之一:'订单','OrderClient'

总结:StackNavigator当我导航到另一个DrawerNavigator项目时,我怎么能重置？

Answer 1

您缺少密钥：null。

导航动作应该是这样的。

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