javascript - 使用 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')

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

关于如何做到这一点的任何提示？

标签： javascriptreact-nativereact-navigation-v5

Answer 1

尝试以下操作：

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

然后替换您的代码：

props.navigator.navigate('TodayStack')

和

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