react-navigation 5：深度嵌套堆栈导航器的后退按钮行为应该是什么答案

【问题标题】：react-navigation 5: what should be the back-button behaviour with deep nested stack navigatorsreact-navigation 5：深度嵌套堆栈导航器的后退按钮行为应该是什么
【发布时间】：2020-09-26 02:10:56
【问题描述】：

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

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

根导航器
- 主屏幕
- 票务导航器：
  - CreateTicket 屏幕
  - TakeTicketPicture 屏幕

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

从这里，单击一个按钮，用户将被带到TicketNavigator-CreateTicket（请注意，现在我在一个嵌套的堆栈导航器中）。标题栏标题现在是“创建工单”。从这一点开始，用户移动到TakeTicketPicture 屏幕（！！标题栏标题不变）。如果用户从这个屏幕点击back-button，他会直接回到主屏幕，而不是前一个屏幕（在同一个嵌套导航器中）。

这里是代码（简化）：

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>

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

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

嵌套堆栈导航器是一种不好的做法吗？当用户在嵌套导航器中时，如何使返回按钮（或标题栏）反映导航？

【问题讨论】：

如果您不需要嵌套导航器，这是一种不好的做法。在这种情况下，您应该只有一个导航器。仅在您真正需要时嵌套（例如，普通堆栈 + 模式堆栈、选项卡 + 堆栈、抽屉 + 堆栈、选项卡 + 抽屉等）

标签： react-navigation-stack react-navigation-v5

【解决方案1】：

我会在根级别隐藏标题并在子级别显示。然后，当您在嵌套视图中时，顶部只会有一个显示返回按钮的标题。

... 
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>

【讨论】：