帶有嵌套導航器的 React Navigation 6.x 中不顯示后退按鈕

Question

我的 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>

我想要實現的是，選項卡導航器顯示屬於 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>

使用作為PersonalAreaStackNavigator PersonalArea ，在根堆棧導航器中：

/* 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指南，我能夠在隱藏選項卡欄的屏幕之間導航，但我的問題是，當從選項卡導航器的屏幕之一導航到堆棧導航器屏幕時，后退按鈕不顯示。 例如，路徑TabNavigator -> PersonalArea -> PersonalData不顯示 PersonalData 屏幕中的后退按鈕，但TabNavigator -> PersonalArea -> PersonalData -> Screen E顯示（指向 PersonalData 屏幕）。

這僅發生在 iOS 上。

如何使后退按鈕也出現在堆棧導航器的第一個屏幕中，以指向標簽欄中也包含的第一頁？