在 React 导航中隐藏内部屏幕的底部导航 v5.x

Question

我正在升级 React Native，我正在做一个项目。所以，我想在

这样的内部屏幕上隐藏底部导航

- Dashboard
--- home <- hide bottom navigation
--- moment <- hide bottom navigation
--- period <- hide bottom navigation
--- contact <- hide bottom navigation
- Calendar
- Notification
- User

我尝试在仪表板屏幕选项上使用 tabBarVisible: false，但它隐藏了仪表板屏幕而不是内部屏幕上的底部导航。请问隐藏内屏底部导航的最佳方式是什么？

这是我的导航代码：

底部导航

const BottomNavigation = () => (
  <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
    <Tab.Screen
      name={ScreenName.dashboard}
      options={{tabBarLabel: 'Dashboard'}}
      component={HomeNavigation}
    />
    <Tab.Screen
      name={ScreenName.calendar}
      options={{
        tabBarLabel: 'Calendar',
      }}
      component={Calendar}
    />
    <Tab.Screen
      name={ScreenName.notification}
      options={{
        tabBarLabel: 'Notification',
      }}
      component={Notification}
    />
    <Tab.Screen
      name={ScreenName.user}
      options={{
        tabBarLabel: 'User',
      }}
      component={User}
    />
  </Tab.Navigator>
);

主页导航

const HomeNavigation = () => (
  <Stack.Navigator
    screenOptions={{
      title: null,
      headerStyle: {elevation: 0, shadowOpacity: 0},
    }}>
    <Stack.Screen
      name={ScreenName.home}
      component={Home}
      options={() => ({
        headerShown: false,
      })}
    />
    <Stack.Screen name={ScreenName.moment} component={Moment} />
    <Stack.Screen name={ScreenName.period} component={Period} />
    <Stack.Screen name={ScreenName.contact} component={Contact} />
  </Stack.Navigator>
);

Answer 1

您应该将底部选项卡导航器放在堆栈导航器的第一个屏幕中，而不是相反：

- Home
--- Dashboard
--- Calendar
--- Notification
--- User
- Moment
- Period
- Contact

这样，当您推送新屏幕时，它将位于底部标签栏上方，标签栏将不可见。

https://reactnavigation.org/docs/en/nesting-navigators.html#parent-navigators-ui-is-rendered-on-top-of-child-navigator

Answer 2

就在屏幕上你想隐藏栏，设置tabBarVisible: false。

<Tab.Screen
    name="InnerScreen"
    component={InnerScreen}
    options={{
      tabBarVisible: false, //like this
      tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
    }}
  />