如何使底部标签栏仅出现在反应导航中嵌套堆栈的默认屏幕上？

Question

假设我有一个 Tab Navigator，每个选项卡都有自己的嵌套堆栈导航器（请参见下面的代码片段）。现在，我希望选项卡栏 仅在每个嵌套堆栈的默认屏幕中可见 （就像当前 Twitter Android 应用程序的行为一样）。

该文档有一个通用部分 tab bar hiding，但我发现这种方法对我的情况不可行。 V5 文档有更多关于使用 tabBarVisible 选项的解决方法的文字，但不鼓励这样做。

const Tab = createBottomTabNavigator()
const HomeStack = createStackNavigator()
const ProfileStack = createStackNavigator()

const HomeStackScreens = () => (
  <HomeStack.Navigator initialRouteName="DefaultHomeScreen">
    <HomeStack.Screen name="DefaultHomeScreen" component={DefaultHomeScreen} /> {/* Show tab only here (default) */}
    <HomeStack.Screen name="OtherHomeScreen" component={OtherHomeScreen} /> {/* Hide tab here */}
  </HomeStack.Navigator>
)
const ProfileStackScreens = () => (
  <ProfileStack.Navigator initialRouteName="DefaultProfileScreen">
    <ProfileStack.Screen name="DefaultProfileScreen" component={DefaultProfileScreen} /> {/* Show tab only here (default) */}
    <ProfileStack.Screen name="OtherProfileScreen" component={OtherProfileScreen} /> {/* Hide tab here */}
  </ProfileStack.Navigator>
)

const App = () => (
  <NavigationContainer>
    <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={HomeStackScreens } />
      <Tab.Screen name="Profile" component={ProfileStackScreens} />
    </Tab.Navigator>
  </NavigationContainer>
)

我应该如何修改导航器和屏幕以针对此用例执行此行为？

P.S 我使用的 React Navigation 版本是 v5，不过我打算迁移到 v6。所以，两者都可以。

Answer 1

如您所指一般用途 tab bar hiding

const MainStack = createStackNavigator()
const Tab = createBottomTabNavigator()
const HomeStack = createStackNavigator()
const ProfileStack = createStackNavigator()

const HomeStackScreens = () => (
  <HomeStack.Navigator initialRouteName="DefaultHomeScreen">
    <HomeStack.Screen name="DefaultHomeScreen" component={DefaultHomeScreen} /> 
    {/*add more screen with bottom tabs here*/}
  </HomeStack.Navigator>
)

const ProfileStackScreens = () => (
  <ProfileStack.Navigator initialRouteName="DefaultProfileScreen">
    <ProfileStack.Screen name="DefaultProfileScreen" component={DefaultProfileScreen} />
    {/*add more screen with bottom tabs here*/}
  </ProfileStack.Navigator>
)

const TabsNavigator = () => (
   <Tab.Navigator initialRouteName="Home">
      <Tab.Screen name="Home" component={HomeStackScreens } />
      <Tab.Screen name="Profile" component={ProfileStackScreens} />
    </Tab.Navigator>
)


const App = () => (
  <NavigationContainer>
    <MainStack.Navigator>
      <MainStack.Screen name="tabsNavigator" component={TabsNavigator} />
      <MainStack.Screen name="OtherHomeScreen" component={OtherHomeScreen} />
      <MainStack.Screen name="OtherProfileScreen" component={OtherProfileScreen} />
      {/*add more screen without bottom tabs here*/}
    </MainStack.Navigator>
  </NavigationContainer>
)

如何使底部标签栏仅出现在反应导航中嵌套堆栈的默认屏幕上？

How to make bottom tab bar appear only on default screens of nested stacks in react-navigation?

javascript

react-native

react-navigation

您将需要更改导航结构。