[英]With React Navigation 5, how do I make navigating to a drawer item reset the state of that stack?
I am using React Navigation v5 and have a drawer navigator whose screens are a bunch of stack navigators.我正在使用 React Navigation v5 并有一个抽屉导航器,其屏幕是一堆堆栈导航器。
<AppDrawer.Navigator drawerContent={({navigation, state}) => <DrawerScreen navigation={navigation} state={state}/>}>
<AppDrawer.Screen name="TodayStack" component={TodayStackComponent}/>
<AppDrawer.Screen name="ClientsStack" component={ClientsStackComponent}/>
<AppDrawer.Screen name="SettingsStack" component={SettingsStackComponent}/>
</AppDrawer.Navigator>
In DrawerScreen
(which is my custom override of the Drawer component), I have it currently navigating to each drawer item like this:在
DrawerScreen
(这是我对 Drawer 组件的自定义覆盖)中,我目前将它导航到每个抽屉项目,如下所示:
props.navigator.navigate('TodayStack')
That works fine in general.一般来说,这很好用。 However, I also want it to reset the stack state when you navigate from the drawer.
但是,我还希望它在您从抽屉导航时重置堆栈 state。 For example, I may have 3 stacked screens in the navigation history of
TodayStack
.例如,我在
TodayStack
的导航历史中可能有 3 个堆叠的屏幕。 When I go to another drawer item, then tap back to TodayStack
, I want it to reset back to the initial route for TodayStack
's navigator.当我 go 到另一个抽屉项目时,然后点击回到
TodayStack
,我希望它重置回TodayStack
导航器的初始路线。
Any tips on how to do this?关于如何做到这一点的任何提示?
try the following:尝试以下操作:
import { CommonActions, useNavigation } from '@react-navigation/native';从 '@react-navigation/native' 导入 { CommonActions, useNavigation };
then replace your code:然后替换您的代码:
props.navigator.navigate('TodayStack')
with和
navigation.dispatch(
CommonActions.reset({
index: 0,
routes: [
{ name: 'TodayStack' },
],
})
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.