隐藏NavigatorIOS组件的导航栏

Question

在Native IOS中，似乎很容易隐藏导航界面（http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/）中的标签栏，但在React Native中，似乎并不那么容易实现。即使我覆盖 RCTWrapperViewController 的 hidesBottomBarWhenPushed 方法：

- (BOOL) hidesBottomBarWhenPushed
{
  return YES;
}

Answer 1

这是基于this issue in React-Native

的更深入的答案

在Xcode的左侧边栏中，选择＆＃39; Project Manger＆＃39; （文件夹图标）查看文件结构。

您要查找的特定文件夹位于： [YourAppName]＆gt;图书馆＆gt; React.xcodeproj＆gt; React＆gt;观点

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很容易隐藏navBar：true。

在我的情况下，我有一个TabNav＆gt; HomeNav＆gt;主屏幕

在HomeNav中传递showTabBar道具：

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

我希望这有助于某人！

Answer 2

React原生中有两个主要的Navigator组件：Navigator和NavigatorIOS。

文档中各有一个good comparison of the pros and cons。

隐藏NavigatorIOS组件的导航栏

将navigationBarHidden属性设置为true以隐藏导航栏：

<NavigatorIOS navigationBarHidden={true}>
    <View>
    ...
    </View>
</NavigatorIOS>

请参阅React native documentation。

隐藏导航器组件的导航栏

由于Navigator组件的导航栏为provided explicitly，因此默认情况下不会呈现。

Answer 3

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

react-native-tabbar-navigator

Answer 4

我为此问题更改了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;
}

Answer 5

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

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

Answer 6

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

  ...

}

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

6 个答案:

隐藏NavigatorIOS组件的导航栏

隐藏导航器组件的导航栏