React navigation v1 在标签栏中隐藏一个项目

Question

我正在使用 React 导航 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",
}
);

然后我像这样被包含在堆栈导航器中

const MainStack = StackNavigator(
{
  ContactSelector: {
    screen: ContactSelector,
  }
},
{
  focused: true,
  lazy: true,
  initialRouteName: "Login",
  navigationOptions: {
    headerStyle: {
      elevation: 0,
      shadowOpacity: 0,
    },
  },
  cardStyle: {
    shadowColor: "transparent",
  },
}
);

我想要的是仅显示某些用户的标签栏项目。 可能吗？ 我一直在寻找和寻找，但找不到任何东西，这似乎是不可能的。 任何指针？

"react-native": "^0.59.10"

反应导航 1.x

Answer 1

我强烈建议您升级 react 导航版本。 我不确定你想要什么是可以实现的，但也许你可以尝试这样的事情：

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