Как скрыть "ОПРЕДЕЛЕННЫЙ ЭЛЕМЕНТ ПАНЕЛИ ВКЛАДОК" из нижней панели вкладок при использовании: @react-navigation / bottom-tabs

#javascript #reactjs #react-native

#javascript #reactjs #реагировать-родной

Вопрос:

Вот видео, демонстрирующее все мои видимые текущие элементы нижней вкладки: Главная страница, Моя учетная запись, Корзина и меню. https://streamable.com/no6anz

У меня есть другие элементы нижней вкладки, которые я хочу отобразить на экране, но которые не будут видны в самой нижней панели вкладок.(Например: SettingsView)

Как мне добиться этого, используя react native navigation v5?

Ответ №1:

просто на элементе (Tab.Screen), который вы не хотите показывать, отобразите нулевую кнопку tabBarButton.

 <Tab.Screen
    name="SignIn"
    component={SignInScreen}
    options={{
      tabBarButton: (props) => null, //like this
      tabBarStyle: { display: 'none' }, //this is additional if you want to hide the whole bottom tab from the screen version 6.x
    }}
  />

Ответ №2:

Я решил свой собственный вопрос:

 <Tab.Navigator
  tabBarOptions={{
    activeTintColor: '#161718',
    inactiveTintColor: '#ffffff',
    style: {
      backgroundColor: '#161718',
      paddingTop: 10,
      borderTopColor: '#161718',
    },
    labelStyle: {
      textAlign: 'center',
      top: 8,
    },
  }}
  screenOptions={({route}) => ({
    tabBarButton: ['Contact', 'Route2ToExclude'].includes(route.name)
      ? () => {
          return null;
        }
      : undefined,
  })}>

Как вы можете видеть, я использую screenoptions, чтобы определить, какие маршруты следует исключить из нижней панели вкладок. Обратите внимание, что эти маршруты должны быть фактическим экраном в компоненте <tab.navigator> .

Ответ №3:

Реагирующая навигация Навигация по нижней вкладке ссылка на проблему github

https://github.com/react-navigation/react-navigation/issues/5230#issuecomment-595846400