Скрыть нижнюю навигацию для внутренних экранов в реагирующей навигации v5.x - PullRequest
Новая
       110

Скрыть нижнюю навигацию для внутренних экранов в реагирующей навигации v5.x

1 голос
/ 20 февраля 2020

Я повышаю уровень реакции на родную и работаю над проектом. Итак, я хочу скрыть нижнюю навигацию на внутренних экранах, таких как 

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

1 Ответ

1 голос
/ 20 февраля 2020

Вы должны поместить навигатор нижней вкладки в первый экран стекового навигатора, а не наоборот: 

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

Таким образом, когда вы создадите sh новый экран, это будет выше нижней панели вкладок, и панель вкладок не будет видна.

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

...