Come nascondere la barra delle schede nell'interfaccia di navigazione in React Native?

Question

In IOS nativo, sembra molto facile nascondere la barra delle schede nell'interfaccia di navigazione (http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/), ma in React Nativo, sembra non sia così facile implementarlo. Anche sovrascrivo il hidesBottomBarWhenPushed metodo per RCTWrapperViewController:

- (BOOL) hidesBottomBarWhenPushed 
{ 
    return YES; 
} 

Answer 1

Ci sono due principali componenti Navigator in Reagire origini: Navigator e NavigatorIOS.

• La documentazione ha uno good comparison of the pros and cons di ciascuno.

---

nascondere la barra di navigazione per i componenti NavigatorIOS

Impostare la proprietà navigationBarHidden per true per nascondere la barra di navigazione:

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

V. Reagire nativo documentation.

nascondere la barra di navigazione per i componenti Navigator

Dal momento che la barra di navigazione è provided explicitly per Navigator componenti, non è resa per impostazione predefinita.

Answer 2

Puoi provare a utilizzare il pacchetto di sotto, ha una buona soluzione per questo

react-native-tabbar-navigator

Answer 3

cambio ReactNative 0,11 codice sorgente per questo caso problem.In ne avete bisogno: in RCTNavigationController, aggiungere codici:

- (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

si tratta di un più in profondità un nswer basato su this issue in React-Native

Nella barra laterale di sinistra di Xcode, selezionare "Project Manager" (icona della cartella) per vedere la struttura del file.

La particolare cartella che si sta cercando si trova in: [YourAppName]> Biblioteche> React.xcodeproj> Reagire> Visualizzazioni

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; 

non ho bisogno di aggiungere propTypes a NavigatorIOS.ios.js o TabBarIOS.ios.js

Affinché tutto questo funzioni, ogni scheda apparentemente ha bisogno di avere il proprio componente NavigatorIOS.Quando ho avuto il tab semplicemente presentare una schermata - (void) navigationController: (UINavigationController *) navigationController ... il metodo non viene chiamato. Questo non era un problema per me, perché nascondere il navBar è facilmente fatto con navigationBarHidden: true.

Nel mio caso ho avuto un TabNav> HomeNav> HomeScreen

Passaggio showTabBar prop in HomeNav:

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

Spero che questo aiuta qualcuno!

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

    ... 

}