如何使底部標簽欄僅出現在 react-navigation 中嵌套堆棧的默認屏幕上？

Question

假設我有一個選項卡導航器，每個選項卡都有自己的嵌套堆棧導航器（請參閱下面的代碼段）。 現在，我希望標簽欄只在每個嵌套堆棧的默認屏幕中可見（就像當前的 Twitter Android 應用程序一樣）。

該文檔有一個用於 隱藏通用 標簽欄的部分，但我認為這種方法不適用於我的情況。 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>
)

我應該如何修改導航器和屏幕以針對此用例執行此行為？

PS 我使用的 React Navigation 版本是 v5，不過我打算遷移 v6。 所以，兩者在某種程度上都可以。

Answer 1

您將需要更改導航結構。

當您提到通用 標簽欄隱藏時

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>
)