React Native Navigation:重置堆栈导航器 [英] React Native Navigation: Reset Stack Navigator

问题描述

我使用的是 React Navigation 5.

I'm using React Navigation 5.

在顶部，我有一个抽屉导航器，具有以下屏幕:

At the top I have a Drawer navigator, with the following screens:

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

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

Within StackNavigatorOne, I have a stack navigator,

<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 在该堆栈的顶部.

From the Drawer Navigator, if the user navigates to Stack Navigator One, and then moves to Screen2, the Screen2 stays on top. Now, if the user opens drawer navigation and again clicks on Stack Navigator One, he will be on Screen 2 only because Screen 2 is on top in that stack.

但是，我需要的是，当用户单击DrawerScreen One 时，它应该始终转到StackNavigatorOne 的Screen1.是否可以在 StackNavigatorOne 中重置屏幕，而不管用户在哪个屏幕上，当他单击抽屉中的 DrawerScreen One 时?

However, what I need is that when the user clicks the DrawerScreen One, it should always go to Screen1 of StackNavigatorOne. Is it possibe to reset the screens in StackNavigatorOne irrespective of which screen the user is on, when he click the DrawerScreen One in the drawer?

谢谢.

推荐答案

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

The simplest solution is use unmountOnBlur: true.

在 DrawerNavigator 的 screenOptions 上有一个道具 unmountOnBlur: true.当用户从一个抽屉屏幕移动到另一个抽屉屏幕时，您可以使用它来卸载屏幕堆栈.

There is a props unmountOnBlur: true on DrawerNavigator's screenOptions. You can use it to unmount the stack of the screen when user move from one drawer screen to another.

你可以这样使用它:

<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 的更多详细信息.

这篇关于React Native Navigation:重置堆栈导航器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！