1

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

使用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指南，我能够在隐藏选项卡栏的屏幕之间导航，但我的问题是从选项卡导航器的屏幕之一导航到堆栈导航器屏幕时不显示后退按钮。例如，路径TabNavigator -> PersonalArea -> PersonalData不会在 PersonalData 屏幕中显示后退按钮，但TabNavigator -> PersonalArea -> PersonalData -> Screen E会显示（指向 PersonalData 屏幕）。

这仅在 iOS 上发生。

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

4

1 回答 1

0

发表我的评论作为答案：我找到了使用样式设置的解决方案。

于 2021-11-18T16:18:56.440 回答