React-navigation教程缺少后退按钮

Question

我是新来的本地反应，我正在从auth流的官方反应导航文档中学习本教程。 https://reactnavigation.org/docs/en/auth-flow.html

他们有一个非常好的现场例子：https://snack.expo.io/@react-navigation/auth-flow-v3

登录后，当您单击Show me more of the app from the home screen时，它会转到带有后退按钮的页面。只是从查看代码，我无法弄清楚他们如何能够生成这个后退按钮。

也许代码不完整？

我知道导航栏上的后退按钮的一种方法是执行以下操作：

headerLeft: (
  <Button
    onPress={() => alert('This is a button!')}
    title="Info"
    color="#fff"
  />
),

但是显示的代码中缺少这个？

Answer 1

默认情况下，React Navigation提供了Back按钮以导航到上一个屏幕。

因为ios没有硬件后退按钮，所以他们只有一个可以返回的手势。如果它被禁用，则无法转到上一个屏幕。

所以堆栈导航器的默认后退按钮必须在那里，我们有它。

因此，当有前一个屏幕可用时，后退按钮将在那里，如果屏幕是第一个堆叠则没有后退按钮。

假设我们有一个用于身份验证屏幕的切换导航器，如signIn，signUp等，以及一个用于所有其他屏幕的堆栈导航器。

因此，默认情况下，切换导航器在其堆栈中只有一个屏幕，因此这些屏幕都不会有后退按钮，因为您无法从此处返回有一个死胡同。

对于堆栈导航器，您在堆栈中的第一个屏幕在所有其他屏幕之前呈现之前没有后退按钮，但之后的所有屏幕都将具有后退按钮，因为从那里您可以返回右侧。

Answer 2

创建开关或堆栈导航器时，React Navigation已经具有带后退按钮的默认标题。 headerLeft属性仅在您要覆盖默认后退按钮时使用。 ：d

编辑：

把事情搞清楚。

SwitchNavigator的目的是一次只显示一个屏幕。默认情况下，它不处理后退操作，并在您切换时将路由重置为其默认状态。 -switch navigator

堆栈导航器故意在堆栈顶部创建屏幕（如果您有初始屏幕）。初始屏幕没有带后退按钮的标题，因为它不知道返回的位置。这就是为什么当你导航到“OtherStack”时，它会在“HomeScreen”的顶部创建一个名为“OtherStack”的新屏幕。新创建的屏幕具有带后退按钮的默认标题，因此您可以返回初始堆栈。

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });