react-native - React Native Navigation：重置 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>

从 Drawer Navigator 中，如果用户导航到Stack Navigator One，然后移动到Screen2，则 Screen2 保持在顶部。现在，如果用户打开抽屉导航并再次点击Stack Navigator One，他将出现在屏幕 2 上，因为屏幕 2 在该堆栈的顶部。

但是，我需要的是，当用户单击 时DrawerScreen One，它应该始终转到Screen1of StackNavigatorOne。StackNavigatorOne无论用户在哪个屏幕上，当他点击抽屉时，是否可以重置屏幕DrawerScreen One？

谢谢。

标签： react-nativereact-navigation

Answer 1

最简单的解决方案是使用unmountOnBlur: true.

unmountOnBlur: trueDrawerNavigator 的 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/>

您可以在此处找到有关 unmountOnBlue 的更多详细信息。