Question

我是本机反应的新手，我正在遵循有关身份验证流程的官方react-navigation文档中的本教程。 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已经具有带后退按钮的默认Header。仅当您要覆盖默认的后退按钮时，才使用headerLeft属性。：D

编辑：

清除内容。

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

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

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

Answer 2

默认情况下，“反应导航”提供了“返回”按钮以导航到上一个屏幕。

因为ios没有硬件后退按钮，所以它们所拥有的只是可以回退的手势。如果已禁用，则无法进入上一屏幕。

因此，堆栈导航器的默认后退按钮必须在那里，并且我们已经有了它。

因此，当有上一个屏幕时，将有一个后退按钮；如果屏幕是它的第一个堆栈，则没有后退按钮。

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

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

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

反应导航教程缺少后退按钮

2 个答案: