react-navigation-stack - react 导航 5 : what should be the back-button behaviour with deep nested stack navigators

Question

我很难理解后退按钮应该如何与 @react-navigation/stack(版本 5)一起工作。我面临的问题是:当我在一个深层嵌套的屏幕中并按下后退按钮时，它会将我直接带到我的应用程序的顶部屏幕，而不是紧接的上一步。

首先让我说明一下我的导航器和屏幕的(过度简化的)结构。然后我将展示用于实现它的代码。

• RootNavigator
  • 主屏幕
  • TicketNavigator:
    • 创建工单屏幕
    • TakeTicketPicture 屏幕

因此，当应用程序启动时，它会出现在主屏幕上 (RootNavigator-HomeScreen)。这里的标题栏标题是“主页”。

从这里，单击一个按钮，用户将被带到 TicketNavigator-CreateTicket(请注意，现在我处于嵌套堆栈导航器中)。标题栏标题现在是“创建票证”。从这一点开始，用户移动到 TakeTicketPicture 屏幕(!! 标题栏标题未更改)。如果用户点击此屏幕上的后退按钮，他会直接返回到主屏幕，而不是之前的屏幕(在同一个嵌套导航器中)。

这是代码(简化):

root-navigator.tsx

...
import { CreateTicketNavigator } from './create-ticket-navigator';

<Stack.Navigator>
  <Stack.Screen name='Home' component={HomeScreen}/>
  <Stack.Screen name='CreateTicket' component={CreateTicketNavigator} />
</Stack.Navigator>

create-ticket-navigator.tsx

<Stack.Navigator>
  <Stack.Screen name='CreateTicketScreen' options={{headerShown: false}} component={CreateTicketScreen} /> {/** headers are hidden in nested navs */}
  <Stack.Screen name='TakePictureScreen' options={{headerShown: false}} component={TakePictureScreen} />
</Stack.Navigator>

奇怪的想法是，如果我允许嵌套导航具有标题，那么我会在屏幕上看到“重复的”标题，每个堆栈导航器一个。在这种情况下，当我单击“嵌套后退按钮”时，我导航回到“嵌套导航器”的初始屏幕(这是我正在寻找的行为)。

显然我必须隐藏第二个导航器。但似乎“外部”标题栏仅连接到级别堆栈导航器。为了解决这个问题，我摆脱了嵌套的堆栈导航器并将我的所有屏幕放在同一级别(兄弟)。

嵌套堆栈导航器是一种不好的做法吗？当用户在嵌套导航器中时，如何使后退按钮(或标题栏)反射(reflect)导航？

Answer 1

我会在根级别隐藏 header ，并在子级别显示它。然后当您在嵌套 View 中时，顶部将只有一个标题显示后退按钮。

... 
import { CreateTicketNavigator } from './create-ticket-navigator';

<Stack.Navigator>
  <Stack.Screen name='Home' component={HomeScreen}/>
  <Stack.Screen name='CreateTicket' component={CreateTicketNavigator} options={{headerShown: false}}/>
</Stack.Navigator>

create-ticket-navigator.tsx

<Stack.Navigator>
  <Stack.Screen name='CreateTicketScreen' component={CreateTicketScreen} />
  <Stack.Screen name='TakePictureScreen' component={TakePictureScreen} />
</Stack.Navigator>