使用React Navigation，如何强制抽屉导航器弹出到堆栈顶部

Question

我正在使用React Navigation，并且有一个抽屉导航器，其中包含几个Stack navigator作为其项。当我打开抽屉导航器并点击一个项目时，它会显示我点击的堆栈中的第一个屏幕。当我转到堆栈中的第二个屏幕，然后打开抽屉并点击活动堆栈的同一个抽屉链接时，我希望它显示堆栈的第一个屏幕，但它目前什么都不做。我怎样才能做到这一点？

以下是一份说明问题的小吃：https://snack.expo.io/@zeckdude/导航演示

/**
* Item Stack
* Follows the Items Flow chart
*/
const ItemStack = createStackNavigator(
{
Items: { screen: ItemsScreen },
Camera: { screen: CameraScreen },
ViewItem: { screen: ViewItemScreen },
AddEditItem: { screen: AddEditItemScreen },
},
{
headerMode: 'none',
navigationOptions: {
gesturesEnabled: false,
},
}
);

/**
* Send Stack
* Follows the Send Flow chart
*/
const SendStack = createStackNavigator(
{
Send: { screen: SendScreen },
ScanQR: { screen: ScanQRScreen },
SendConfirmation: { screen: SendConfirmationScreen },
},
{
headerMode: 'none',
navigationOptions: {
gesturesEnabled: false,
},
}
);

/**
* Authorized Drawer
* Used to set the labels in the drawer and enable drawer
*/
const AuthorizedDrawer = createDrawerNavigator(
{
ScanQR: { 
screen: ScanQRScreen,
navigationOptions: {
drawerLabel: 'Scan'
} 
},
ItemStack: { 
screen: ItemStack,
navigationOptions: {
drawerLabel: 'Items'
}
},
SendStack: { 
screen: SendStack,
navigationOptions: {
drawerLabel: 'Send'
} 
},
},
{
initialRouteName: 'ItemStack'
}
);

/**
* Authorized Drawer Stack
* Put the drawer inside a stack so the header can be added and styled
*/
const AuthorizedDrawerStack = createStackNavigator(
{
AuthorizedDrawer: { screen: AuthorizedDrawer },
}, 
{
headerMode: 'float',
navigationOptions: ({navigation, screenProps, navigationOptions}) => {
return {
headerLeft: (
<View 
style={{
paddingLeft: 10,
}}
>
<Icon 
name={navigation.state.isDrawerOpen ? 'close' : 'menu'}
color="#2F6BAE"
onPress={() => {
navigation.toggleDrawer();
}} 
/>
</View>
),
headerTitle: <Logo />
};
}
}
)

Answer 1

在我的项目中，我已经完全自定义了contentComponent:

const DrawerNavigator = createDrawerNavigator({
screens, stacks etc...
}, {
contentComponent: SideMenu,
...
})

SideMenu只是一个带有导航按钮的简单组件。因此，我在自定义组件中实现了每个onPress函数。他们只是导航到相关堆栈的初始屏幕，如下所示：

onPress = () => {
this.props.navigation.dispatch(DrawerActions.closeDrawer()); 
this.props.navigation.navigate('TheInitialScreenInTheStack')
}

它适用于React Navigation 2。它在其他方面也对我很有帮助，比如从抽屉登录和退出，或者在选项卡中添加冗余依赖变量。

Answer 2

我使用了一个监听器来捕捉任何按压。在正常的导航程序中，事件称为"tabPress"，但在抽屉中，它称为"drawerItemPress"。然后，我使用导航器手动指定要使用的堆栈，以及该堆栈的相应顶部屏幕。不要忘记preventDefault，它将尝试进行正常的导航。

listeners={{
drawerItemPress: (e) => {
e.preventDefault();
navigation.navigate('Home', screen: {'TopScreen'})
},
}}