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",
}
);

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

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)

React Navigation v1隐藏选项卡栏中的项目

1 个答案: