在反应导航 v5.x 中隐藏内部屏幕的底部导航答案

【问题标题】：Hide bottom navigation for inner screens in react navigation v5.x在反应导航 v5.x 中隐藏内部屏幕的底部导航
【发布时间】：2020-02-20 12:48:16
【问题描述】：

我正在升级 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>
);

【问题讨论】：

在堆栈导航器中创建 tabnavigator，反之亦然
@AshwithSaldanha 非常感谢这项工作。

标签： reactjs react-native react-native-android react-navigation react-navigation-v5

【解决方案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

【讨论】：

【解决方案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
    }}
  />

【讨论】：