react-native - react native 导航 : Reset Stack Navigator

Question

我正在使用 React Navigation 5。
在顶部，我有一个抽屉导航器，具有以下屏幕:

  <Drawer.Navigator>
    <Drawer.Screen name="One" component={StackNavigatorOne} />
    <Drawer.Screen name="Two" component={StackNavigatorTwo} />
    <Drawer.Screen name="Three" component={StackNavigatorThree} />
  <Drawer.Navigator/>

在 StackNavigatorOne 中，我有一个堆栈导航器，

<Stack.Navigator>
  <Stack.Screen name="Screen1" component={Screen1} />
  <Stack.Screen name="Screen2" component={Screen2} />
  <Stack.Screen name="Screen2" component={Screen3} />
</Stack.Navigator>

从抽屉导航器中，如果用户导航到 Stack Navigator One ，然后移至 Screen2 ，Screen2 保持在顶部。现在，如果用户打开抽屉导航并再次点击 Stack Navigator One ，他将出现在屏幕 2 上只是因为屏幕 2 在该堆栈的顶部。
但是，我需要的是当用户单击 DrawerScreen One 时，它应该总是转到 Screen1的 StackNavigatorOne .是否可以在 StackNavigatorOne 中重置屏幕？无论用户在哪个屏幕上，当他单击 DrawerScreen One 时在抽屉里？
谢谢。

Answer 1

最简单的解决方案是使用 unmountOnBlur: true .
有 Prop unmountOnBlur: true在 DrawerNavigator 的 screenOptions 上。当用户从一个抽屉屏幕移动到另一个抽屉屏幕时，您可以使用它来卸载屏幕堆栈。
你可以这样使用它:

<Drawer.Navigator
  screenOptions={{
    unmountOnBlur: true
  }}
>
  <Drawer.Screen name="One" component={StackNavigatorOne} />
  <Drawer.Screen name="Two" component={StackNavigatorTwo} />
  <Drawer.Screen name="Three" component={StackNavigatorThree} />
<Drawer.Navigator/>

您可以找到 more detail about unmountOnBlue here.