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

2024-04-09

我有下一个布局:

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

当点击任何选项卡顶部栏中的汉堡包按钮时,抽屉就会打开。旁边的抽屉里有一些菜单项。当我点击一个项目时,我想将新屏幕推送到当前活动的选项卡( searchTab 或 secondaryTab )。请注意,我是从抽屉组件中推动的。挑战是如何知道当前要推送的活动项目的 ID,或者是否有其他方法可以做到这一点?


好吧,想通了。希望这能帮助其他也在为此苦苦挣扎的人。在我的抽屉组件中,我有一个全局侦听器:

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 }
    }
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐