wix react native navigation v2 | how to push new s

问题:

I have the next layout:

    Navigation.setRoot( {
        root: {
            sideMenu: {
                right: {
                    component: {
                        id: 'sideDrawer',
                        name: DRAWER,
                    }
                },
                center: {
                    bottomTabs: {
                        id: 'bottomTabs',
                        children: [
                            {
                                stack: {
                                    children: [
                                        {
                                            component: {
                                                id: 'searchTab',
                                                name: SEARCH_TAB,
                                                options: {
                                                    bottomTab: {
                                                        text: 'Search',
                                                        icon: iconsMap[ 'search' ],
                                                        testID: 'searchTab',
                                                    },
                                                    topBar,
                                                }
                                            }
                                        }
                                    ]
                                }
                            },
                            {
                                stack: {
                                    children: [
                                        {
                                            component: {
                                                id: 'secondTab',
                                                name: SECOND_TAB,
                                                options: {
                                                    bottomTab: {
                                                        text: 'Second Tab',
                                                        icon: iconsMap[ 'random' ],
                                                        testID: 'secondTab',
                                                    },
                                                    topBar,
                                                }
                                            }
                                        }
                                    ]
                                }
                            },
                        ]
                    }
                }
            }
        }
    } )

The drawer is open when a hamburger button in the topBar on any tab is tapped. In the side drawer I have a few menu items. When I tap an item I want to push a new screen to currently active tab ( searchTab or secondTab ). Please note I'm pushing from the drawer component. The challenge is how to know the id of the currently active item to push to or is there any other way to do that?

回答1:

Ok, figured out. Hopefully this will help someone else also struggling with this. In my drawer component I have a global listener:

constructor( props: Props ) {
    super( props )

    Navigation.events().registerComponentDidAppearListener( ( { componentId } ) => {
        // only spy on tabs we don't need other screens
        if (componentId === 'searchScreen' || componentId === 'secondScreen') {
            this.setState({
                activeComponentId: componentId
            })
        }
}

Then when I need to open a screen I already have the active component id and can safely push new screen onto it.

openMenuItem( screenName ) {
    // close drawer
    Navigation.mergeOptions( 'sideDrawer', {
        sideMenu: {
            right: {
                visible: false
            }
        }
    } )

    // open menu item
    Navigation.push( this.state.activeComponentId, {
        component: { name: screenName }
    }
}