React Navigation v1 скрыть элемент на панели вкладок

Question

Я использую React navigation v1, у меня есть нижняя панель вкладок, настроенная следующим образом

const HomeTabs = TabNavigator(
{
  Startside: {
    screen: MessagesList,
    navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Hjem" } },
  },
  NewMessage: {
    screen: NewMessage,
    navigationOptions: {
      tabBarTestIDProps: { accessibilityLabel: "Skriv melding" },
    },
  },
  ClassList: {
    screen: ClassList,
    navigationOptions: {
      tabBarTestIDProps: { accessibilityLabel: "Klasseliste" },
    },
  },
  Archive: {
    screen: Archive,
    navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Arkiv" } },
  },

  Settings: {
    screen: Settings,

    navigationOptions: {
      tabBarTestIDProps: { accessibilityLabel: "Innstillinger" },
    },
  },
},
{
  navigationOptions: ({ navigation }) => ({
    headerStyle: {
      elevation: 0,
      shadowOpacity: 0,
    },
  }),
  tabBarOptions: {
    showLabel: false,
    style: {
      borderTopColor: "rgba(0, 0, 0, 0.1)",
    },
  },
  tabBarComponent: TabBarBottom,
  // tabBarComponent: (props) => <CustomTabsNavigator isAdmin={false} />,
  tabBarPosition: "bottom",
  animationEnabled: false,
  swipeEnabled: false,
  focused: true,
  lazy: false,
  initialRouteName: "Startside",
}
);

Затем я включаюсь в навигатор стека следующим образом хотите, чтобы элемент панели вкладок отображался только определенным пользователям. Является ли это возможным? Я искал и искал, но ничего не нашел, и это кажется невозможным. Есть указатели?

"react-native": "^0.59.10"

React Navigation 1.x

Answer 1

Я настоятельно рекомендую вам обновить версию React Navigation. Я не уверен, что то, что вы хотите, достижимо, но, возможно, вы можете попробовать что-то вроде этого:

//TabNavigator takes an object as parameter
//so basically you need to update that object based on some condition
//you want. For instance you display the Admin tab only if user is authenticated

const Tabs = {
  Startside: {
    screen: MessagesList,
    navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Hjem" } },
  },
  NewMessage: {
    screen: NewMessage,
    navigationOptions: {
      tabBarTestIDProps: { accessibilityLabel: "Skriv melding" },
    },
  },
  ClassList: {
    screen: ClassList,
    navigationOptions: {
      tabBarTestIDProps: { accessibilityLabel: "Klasseliste" },
    },
  },
  Archive: {
    screen: Archive,
    navigationOptions: { tabBarTestIDProps: { accessibilityLabel: "Arkiv" } },
  },

  Settings: {
    screen: Settings,

    navigationOptions: {
      tabBarTestIDProps: { accessibilityLabel: "Innstillinger" },
    },
  },
}

//if some condition is met add the Admin tab to the navigator
if(authenticated) {
   tabs.Admin : {
       screen: Admin
   }
}
   
const HomeTabs = TabNavigator(tabs)