使用 React Navigation 5，如何导航到抽屉项目重置该堆栈的状态？

Question

我正在使用 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>

在 DrawerScreen（这是我对 Drawer 组件的自定义覆盖）中，我现在导航到每个抽屉项目，如下所示：

props.navigator.navigate('TodayStack')

总的来说效果很好。但是，我还希望它在您从抽屉导航时重置堆栈状态。比如我在TodayStack的导航历史中可能有3个叠屏。当我转到另一个抽屉项目，然后点击回到 TodayStack，我希望它重置回 TodayStack 导航器的初始路线。

关于如何执行此操作的任何提示？

Answer 1

尝试以下操作：

从'@react-navigation/native'导入{CommonActions, useNavigation};

然后替换您的代码：

props.navigator.navigate('TodayStack')

和

navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [
      { name: 'TodayStack' },
    ],
  })
);

使用 React Navigation 5，如何导航到抽屉项目重置该堆栈的状态？

With React Navigation 5, how do I make navigating to a drawer item reset the state of that stack?

javascript

react-native

react-navigation-v5