如何处理 React Navigation v5 中的底部标签栏可见性？

Question

我正在使用反应导航 v5。我有底部标签导航器，每个标签里面都有一堆屏幕。

Home-Tab1,Tab2,Tab3
Tab1(stack)-A,B,C
Tab2(stack)-D,E,F
Tab3(stack)-G,H

如何处理堆栈内屏幕上的选项卡可见性。（即索引>0 或堆栈初始路由屏幕除外）。在上面的场景中，我想在 B,C,E,F,H 屏幕上隐藏 bottomtabbar。

我读了https://reactnavigation.org/docs/hiding-tabbar-in-screens。但是我无法理解它在多个堆栈中的实现。 有人用 React Navigation 5 实现过吗？

Answer 1

文档中位置的混合可能有点混乱。它只是一个 BottomTabNavigator，其中包含您希望 tabBar 在包含其余屏幕的 StackNavigator 嵌套内部可见的页面。

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="A" component={A} />
      <Tab.Screen name="D" component={D} />
      <Tab.Screen name="G" component={G} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="B" component={B} />
      <Stack.Screen name="C" component={C} />
      <Stack.Screen name="E" component={E} />
      <Stack.Screen name="F" component={F} />
      <Stack.Screen name="H" component={H} />
    </Stack.Navigator>
  );
}

这里的 HomeTabs() 是一个嵌套在 stackNavigator 中的 bottomTabNavigator。 并在屏幕之间导航调用：

navigation.navigate("navigatorName",{screen: "screenName"})