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

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

当点击任何选项卡上顶部栏中的汉堡包按钮时，抽屉就会打开。在旁边的抽屉里，我有一些菜单项。当我点击一个项目时，我想将一个新屏幕推送到当前活动的选项卡（ 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 }
    }
}

Answer 2

我通过监听 React 函数组件内部的 BottomTabSelected 事件使用了类似的解决方案。

const [activeTabIndex, setActiveTab] = useState(2 /** My default tab is 2**/ );
useLayoutEffect(() => {
    const sub = Navigation.events().registerBottomTabSelectedListener(({ selectedTabIndex, unselectedTabIndex }) => {
        setActiveTab(selectedTabIndex);
    })
    return () => sub.remove();
}, [])

并让我的每个底部堆栈都有一个与选项卡索引相关的 ID。

center: {
    bottomTabs: {
        children: [{
                        stack: {
                            id: "BottomTabs_0",
                            children: [{
                                component: {/** Component Info Here **/}
                            }]
                        }
                    },
                    {
                        stack: {
                            id: "BottomTabs_1",
                            children: [{
                                component: {/** Component Info Here **/}
                            }]
                        }
                    },
                    {
                        stack: {
                            id: "BottomTabs_2",
                            children: [{
                                component: {/** Component Info Here **/}
                            }]
                        }
                    }]
    }
}