如何在 React Native 的导航界面中隐藏标签栏？

Posted 2023-02-22

【中文标题】如何在 React Native 的导航界面中隐藏标签栏？

【英文标题】：How To Hide Tab Bar in Navigation Interface in React Native?

【发布时间】：2015-07-28 12:02:27

【问题描述】：

在 Native ios 中，在 Navigation 界面 (http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/) 中隐藏标签栏似乎很容易，但在 React Native 中，似乎没有那么容易实现。即使我重写了 RCTWrapperViewController 的 hidesBottomBarWhenPushed 方法：

- (BOOL) hidesBottomBarWhenPushed

  return YES;

【问题讨论】：

***.com/questions/30266831/… 看看这个。

【参考方案1】：

我为这个问题更改了 ReactNative 0.11 源代码。如果你需要它： 在 RCTNavigationController 中，添加代码：

- (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated
  if (self.viewControllers.count >= 1) 
    [self hideTabBarIfExist:YES];
  

  [super pushViewController:viewController animated:animated];

- (UIViewController *)popViewControllerAnimated:(BOOL)animated 

  if (self.viewControllers.count <= 2) 
    [self hideTabBarIfExist:NO];
  
  return [super popViewControllerAnimated:animated];

- (NSArray *)popToViewController:(UIViewController *)viewController animated:(BOOL)animated 
  if ([self.viewControllers indexOfObject:viewController] == 0) 
    [self hideTabBarIfExist:NO];
  

  return [super popToViewController:viewController animated:animated];

- (NSArray *)popToRootViewControllerAnimated:(BOOL)animated
  [self hideTabBarIfExist:NO];
  return [super popToRootViewControllerAnimated:animated];




- (void)hideTabBarIfExist:(BOOL)flag 
  UIWindow *keyWindow = [[[UIApplication sharedApplication]delegate]window];
  UIView *tabView = [self getTabBarView:keyWindow];
  if (tabView) 
    // you can use other animations
    [UIView animateWithDuration:0.3 animations:^
      tabView.hidden = flag;
    ];

  

- (UIView *)getTabBarView:(UIView *)pView 
  if (pView == nil) 
    return nil;
  
  for (UIView *sView in [pView subviews]) 
    if ([sView isKindOfClass:[UITabBar class]]) 
      return sView;
    
    UIView *t = [self getTabBarView:sView];
    if (t) 
      return t;
    
  
  return nil;

【参考方案2】：

RCTWrapperViewController.m

- (BOOL)hidesBottomBarWhenPushed

  return self.navigationController.viewControllers.count != 1;

RCTTabBar.m

- (void)reactBridgeDidFinishTransaction

  ...

  if (_tabsChanged) 

    NSMutableArray<UIViewController *> *viewControllers = [NSMutableArray array];
    for (RCTTabBarItem *tab in [self reactSubviews]) 
      UIViewController *controller = tab.reactViewController;
      if (!controller) 
        NSArray *tabSubViews = [[[tab reactSubviews] firstObject] reactSubviews];
        RCTNavigator *navigator = [tabSubViews firstObject];
        if (!tabSubViews.count) 
          tab.onPress(nil);
          return;
        
        else if ([navigator isKindOfClass:[RCTNavigator class]]) 
          controller = navigator.reactViewController;
        
        else 
          controller = [[RCTWrapperViewController alloc] initWithContentView:tab];
        
      
      [viewControllers addObject:controller];
    

    _tabController.viewControllers = viewControllers;
    _tabsChanged = NO;
    RCTTabBarItem *tab = (RCTTabBarItem *)[[self reactSubviews] firstObject];
    tab.onPress(nil);
  

  ...

【参考方案3】：

这是基于this issue in React-Native的更深入的答案

在 Xcode 的左侧边栏中，选择“Project Manger”（文件夹图标）以查看文件结构。

您要查找的特定文件夹位于： [YourAppName] > 库 > React.xcodeproj > React > 视图

RCTNavItem.h

#import "RCTComponent.h"

@interface RCTNavItem : UIView

//add this line:
@property (nonatomic, assign) BOOL showTabBar;

RCTNavItemManager.m

@implementation RCTNavItemManager

RCT_EXPORT_MODULE()

- (UIView *)view

  return [RCTNavItem new];


// add this line:
RCT_EXPORT_VIEW_PROPERTY(showTabBar, BOOL)

RCTNavigator.m

- (void)navigationController:(UINavigationController *)navigationController
      willShowViewController:(__unused UIViewController *)viewController
                    animated:(__unused BOOL)animated


// Add these two lines:
        RCTWrapperViewController *thisController = (RCTWrapperViewController *)viewController;
        navigationController.tabBarController.tabBar.hidden = !thisController.navItem.showTabBar;

我不需要将 propTypes 添加到 NavigatorIOS.ios.js 或 TabBarIOS.ios.js

为了让这一切正常工作，每个选项卡似乎都需要有自己的 NavigatorIOS 组件。当我让选项卡简单地显示一个屏幕时 - (void)navigationController:(UINavigationController *)navigationController... 方法不会被调用。这对我来说不是问题，因为使用 navigationBarHidden: true 可以轻松隐藏导航栏。

就我而言，我有一个 TabNav > HomeNav > HomeScreen

在 HomeNav 中传递 showTabBar 属性：

render() 
    return (
      <NavigatorIOS
        style=styles.container
        client=this.props.client
        initialRoute=
          title: 'Home',
          component: HomeScreen,
          navigationBarHidden: true,
          showTabBar: false,
          passProps:  ...,
        />
      );
    
  

我希望这对某人有帮助！

【讨论】：

这样的事情真的让我担心我们将其用于生产：D 谢谢！

【参考方案4】：

如果您使用的是react-navigation 包，则非常简单：

class ScreenWhereTabbarIsHidden extends React.Component 
  static navigationOptions = 
    tabBarVisible: false,
  

【参考方案5】：

您可以尝试使用下面的包，它有一个很好的解决方案

react-native-tabbar-navigator