如何在React Native中隐藏导航界面中的选项卡栏？

Question

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

- (BOOL) hidesBottomBarWhenPushed 
{ 
    return YES; 
} 

Answer 1

有两个主要的导航成分发生化学反应母语：Navigator和NavigatorIOS。

• 该文档有各自的good comparison of the pros and cons。

---

躲藏NavigatorIOS组件

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

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

见阵营本地documentation。

隐藏的导航组件

导航栏由于导航栏是provided explicitly为Navigator成分，它不是默认渲染。

Answer 2

您可以尝试使用下面的包，它有这个

react-native-tabbar-navigator

Answer 3

我改变ReactNative 0.11源代码，这problem.In情况下，一个很好的解决方案，你需要它： 在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 4

这是一个更深入的基于this issue in React-Native

在Xcode的左侧边栏中，选择'Project Manger'（文件夹图标）以查看文件结构。 [YourAppName]>库> React.xcodeproj>阵营>正文

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 ...方法不会被调用。这对我来说不是问题，因为隐藏navBar很容易通过navigationBarHidden：true来完成。

在我来说，我有一个TabNav> HomeNav>主屏幕

传showTabBar在HomeNav道具：

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

我希望这可以帮助别人！

Answer 5

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

    ... 

}