Question

我正在提高本机响应能力，并且正在从事一个项目。因此，我想在内部屏幕上隐藏底部导航，例如

- 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

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

1 个答案: