Question

我有下一个布局：

    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,
                                                }
                                            }
                                        }
                                    ]
                                }
                            },
                        ]
                    }
                }
            }
        }
    } )

在任意选项卡的topBar中点击一个汉堡按钮时，抽屉将打开。在侧面抽屉中，我有一些菜单项。当我点击一个项目时，我想将新屏幕推送到当前活动的选项卡（searchTab或secondTab）。请注意，我从抽屉组件中推入。面临的挑战是如何知道要推送到当前活动项目的ID，或者还有其他方法可以做到这一点？

Answer 1

好，知道了。希望这可以帮助其他也为此奋斗的人。在我的抽屉组件中，我有一个全局侦听器：

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

然后，当我需要打开屏幕时，我已经有了活动的组件ID，可以安全地将新屏幕推送到该屏幕上。

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

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

wix反应本机导航v2 |如何从侧抽屉组件将新屏幕推送到当前屏幕

1 个答案: