我有下一个布局：
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，或者还有其他方法可以做到这一点？
好，知道了 希望这可以帮助其他也在此方面挣扎的人。在抽屉组件中，我有一个全局侦听器：
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 }
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句