在TabNavigator中隐藏TabBar项目 [英] Hide TabBar item in TabNavigator

问题描述

如何从TabNavigator隐藏某些TabBar项目.是否有某个特定的TabBarOptions选项，具有这样的visible键(是/否)?

How is it possible to hide certain TabBar item from TabNavigator. Is there a certain TabBarOptions option, which has visible key(true/false) like this?

const Tabs = TabNavigator({
  Home: {
    screen: Home
  },
  Profile: {
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: {
    screen: More
  },
})

推荐答案

tabBarOptions的问题是仅隐藏所选屏幕的当前导航(选项卡).但是不会隐藏/显示选项卡.

The problem with tabBarOptions is that only hide the current navigation (tabs) for the selected screen. But does not hide/show the tabs.

tabBarOptions: {
      visible: false
    }

自定义解决方案

我制作了一些特殊的类来使用createMaterialTopTabNavigator

export default class CustomTabsNavigator extends Component {
  // Final navigation setup with screens
  TabsNavigation;

  constructor(props) {
    super(props);
    // Only this is necessary if you just want to hide/show without change it.
    this._setScreens();
  }
  // This is necessary if you want to hide/show depending on some user behavior
  componentDidUpdate(prevProps) {
    // Add your condition to avoid infinite renders
    if (prevProps.foo === this.props.foo) return;
    this._setScreens();
  }
  // Actual code to show/hide based on props.
  _setScreens = () => {
    const { isAdmin } = this.props;
    const screens = {};
    const settings = {
      tabBarOptions: {
        style: {...}
      }
    };
    // Set tabs depending on user and state
    if (isAdmin) {
      screens.Dashboard = {
        screen: DashboardScreen,
        navigationOptions: { ... }
      };
    }
    screens.Home = { screen: HomeScreen };
    this.TabsNavigation = createMaterialTopTabNavigator(screens, settings);
    // Since we are not using setState
    this.forceUpdate();
  };

  render() {
    // AppContainer is required in react-native version 3.x
    const { props } = this;
    const NavigatorTabs = createAppContainer(this.TabsNavigation);
    return <NavigatorTabs screenProps={{ ...props }} />;
  }
}

标签的实现

<CustomTabsNavigator isAdmin={true} />

这篇关于在TabNavigator中隐藏TabBar项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！