Reactjs React导航教程缺少后退按钮

Reactjs React导航教程缺少后退按钮,reactjs,react-native,react-navigation,Reactjs,React Native,React Navigation,我是react native新手,我正在关注官方react导航文档中关于auth flow的教程。 他们有一个非常好的活生生的例子: 登录后,当您单击主屏幕上的“向我显示更多应用程序”时,它会将您带到一个带有“后退”按钮的页面。仅仅从代码来看,我不明白他们是如何产生这个后退按钮的 也许代码不完整 我知道导航栏上的后退按钮的一种方式是执行以下操作: headerLeft: ( <Button onPress={() => alert('This is a button!'

我是react native新手,我正在关注官方react导航文档中关于auth flow的教程。

他们有一个非常好的活生生的例子:

登录后,当您单击主屏幕上的“向我显示更多应用程序”时,它会将您带到一个带有“后退”按钮的页面。仅仅从代码来看,我不明白他们是如何产生这个后退按钮的

也许代码不完整

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

headerLeft: (
  <Button
    onPress={() => alert('This is a button!')}
    title="Info"
    color="#fff"
  />
),
headerLeft:(
警报('这是一个按钮!')}
title=“Info”
color=“#fff”
/>
),

但显示的代码中缺少此项?

在创建开关或堆栈导航器时,React导航已具有带有“后退”按钮的默认标题。headerLeft属性仅在您要覆盖默认的后退按钮时使用:D

编辑:

把事情弄清楚

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

其中,stack navigator故意在堆栈顶部创建屏幕(如果您有初始屏幕)。初始屏幕不会有带有后退按钮的标题,因为它不知道返回到哪里。这就是为什么当您导航到“OtherStack”时,它会在“主屏幕”的顶部创建一个名为“OtherStack”的新屏幕。新创建的屏幕具有带有后退按钮的默认标题,所以您可以返回到初始堆栈

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

React Navigation默认情况下提供了返回按钮,用于导航到上一屏幕

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

所以堆栈导航器的默认后退按钮必须在那里,我们已经有了它

所以,当有前一个屏幕可用时,后退按钮就会出现,如果屏幕是堆栈的第一个,则不会有后退按钮

假设我们有一个用于身份验证屏幕(如登录、注册等)的交换机导航器,以及一个用于所有其他屏幕的堆栈导航器

所以这里的switch navigator在默认情况下只有一个屏幕在其堆栈中,所以这些屏幕都没有后退按钮,因为您不能从这里返回,因为这里有一个死胡同


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

那么为什么
主屏幕和
标志屏幕
不需要进行总结:堆栈导航器默认有后退按钮并进行切换导航器没有?