在TabNavigator中隐藏TabBar项

Question

如何从TabNavigator中隐藏某些TabBar项目。是否有某个TabBarOptions选项，其中有visible键（真/假）？

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

Answer 1

tabBarOptions的问题是只隐藏所选屏幕的当前导航（选项卡）。但不隐藏/显示标签。

tabBarOptions: {
      visible: false
    }

Custom solution

我使用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 }} />;
  }
}

Implementation of tabs:

<CustomTabsNavigator isAdmin={true} />

Answer 2

单个标签没有这样的“可见”选项，尽管有talk of its implementation。

可以仅渲染某些选项卡。您可以通过将TabNavigator传递给您希望在特定时间出现的特定选项卡来动态呈现它们。您不必将参数硬编码到TabNavigator（），而是将参数设置为表示要渲染的选项卡的对象，然后您可以随时更改此对象。

请参阅here以便巧妙地实现此功能。

Answer 3

TabNavigator中没有隐藏特定项目的“可见”选项。

您需要创建Stacknavigator和Tabnavigator。在Stacknavigator中，您将添加您的“隐形”tabbar项目，最后是“可见”Tabbar项目的Tabnavigator。

作者：来自@ragnorc的GitHub

const TabsScreen = TabNavigator({
  Profile: { // visible TabBar item
    screen: Thanks,
    tabBarOptions: {
      visible: false
    },
  },
  More: { // visible TabBar item
    screen: More
  },
})

const MainScreenNavigator = StackNavigator({
    Home: { // invisible TabBar item
        screen: Home,
        navigationOptions : {
            header: null /* hide header*/
        }
    },
    Screen 2: { }, // invisible TabBar item
    Screen 3: { }, // invisible TabBar item
    Screen 4: { }, // invisible TabBar item
    TabsScreen: { 
        screen: TabsScreen,
        navigationOptions : {
            header: null /* hide header*/
        }
    },
});