带有嵌套导航器的 React Navigation 6.x 中不显示后退按钮

Posted 2023-04-13

【中文标题】带有嵌套导航器的 React Navigation 6.x 中不显示后退按钮

【英文标题】：Back button doesn't show in React Navigation 6.x with nested navigators

【发布时间】：2021-12-15 01:24:08

【问题描述】：

我的 React Native 应用有一个根 Stack Navigator，其中包含一些屏幕和嵌套导航器：

/* Root Stack Navigator */
const disableBackButtonOpts = 
  headerBackVisible: false,
  gestureEnabled: false


<Stack.Navigator
    initialRouteName=Routes.MainTab
    screenOptions=(route) => (
        headerTitle: getHeaderTitle(route, t),
        headerShown: false
    )
>
    /* Screens handling authentication and registration phases */
    <Stack.Group screenOptions=headerShown: true, ...disableBackButtonOpts>
        <Stack.Screen component=Authentication name=Routes.Auth />
        <Stack.Screen component=UserDataRegistration name=Routes.UserData />
        /* 3 more screens ... */
    </Stack.Group>

    /* Application screens nested in BottomTab and Stack navigators */
    <Stack.Group>
        <Stack.Screen component=MainTabNavigator name=Routes.MainTab />
        <Stack.Screen component=PersonalAreaStackNavigator name=Routes.Profile />
        /* Home, Messages and Documents stack screens */
    </Stack.Group>
    /* Others */
</Stack.Navigator>

我想要实现的是 Tab Navigator 显示属于 4 个堆栈导航器的 4 个屏幕，当导航到这些堆栈导航器的不同屏幕时，隐藏标签栏。

因此，我将 Tab Navigator 声明如下：

const screenOptions: (route: any) => BottomTabNavigationOptions = (route) => (
  headerTitle: getHeaderTitle(route, t),
  headerShown: true,
  tabBarActiveTintColor: style.activecolor,
  tabBarInactiveTintColor: style.inactivecolor,
  tabBarLabelStyle: style.tabBarLabel,
  tabBarStyle: style.tabBar
)

<Tab.Navigator screenOptions=screenOptions>
  <Tab.Screen
    component=PersonalArea name=Routes.PersonalArea
  />
  /* 3 more tab screens */
</Tab.Navigator>

使用PersonalArea 组件，即PersonalAreaStackNavigator 的初始屏幕，在根堆栈导航器内：

/* PersonalAreaStackNavigator */
<Stack.Navigator
  screenOptions=(route) => (
    headerTitle: getHeaderTitle(route, t),
    headerShown: true,
    headerBackButtonMenuEnabled: true,
    headerBackTitleVisible: true
  )
>
  <Stack.Screen component=PersonalArea name=Routes.PersonalArea />
  <Stack.Screen component=PersonalData name=Routes.PersonalData />
  <Stack.Screen component=ScreenC name=Routes.ScreenC />
  <Stack.Screen component=ScreenD name=Routes. />
</Stack.Navigator>

所以，这样，我的结构如下：

RootStack
|--Authentication Page
|--Registration Page
|--TabNavigator
|   |--PersonalArea
|   |--Screen B
|   |--Screen C
|   |--Screen D
|--PersonalAreaStack
|   |--PersonalArea
|   |--PersonalData
|   |--Screen E
|   |-- ...
|--ScreenBStack
|   |--Screen B
|   |-- ...
|  ScreenCStack
|   |--Screen C
|   |-- ...
|-- ...

在 React Navigation guide 之后，我能够在隐藏标签栏的屏幕之间导航，但我的问题是 没有显示后退按钮从选项卡导航器的屏幕之一导航到堆栈导航器屏幕时。例如，路径 TabNavigator -> PersonalArea -> PersonalData 不会在 PersonalData 屏幕中显示后退按钮，但 TabNavigator -> PersonalArea -> PersonalData -> Screen E 会（指向 PersonalData 屏幕）。

这只发生在 ios 上。

如何使后退按钮也出现在堆栈导航器的第一个屏幕中，以指向标签栏中也包含的第一页？

【问题讨论】：

找到使用样式设置的解决方案：reactnavigation.org/docs/upgrading-from-5.x/…

【参考方案1】：

发表我的评论作为答案：我找到了使用 styling settings 的解决方案。