Jak ukryć pasek kart w interfejsie nawigacyjnym w trybie macierzystym?

Question

W Natywnym systemie IOS bardzo łatwo jest ukryć pasek zakładek w interfejsie nawigacyjnym (http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/), ale w React Native wydaje się, że nie jest to tak łatwe w implementacji. Nawet ja przesłonić hidesBottomBarWhenPushed metodę RCTWrapperViewController:

- (BOOL) hidesBottomBarWhenPushed 
{ 
    return YES; 
} 

Answer 1

Istnieją dwa główne elementy Navigator w React ojczysty: Navigator i NavigatorIOS.

• Dokumentacja ma numer good comparison of the pros and cons.

---

Ukrywanie navbar komponentów NavigatorIOS

ustawić właściwość navigationBarHidden do true ukryć pasek nawigacyjny:

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

Zobacz reagować natywną documentation.

Ukrywanie navbar dla Navigator komponentów

Ponieważ navbar jest provided explicitly dla Navigator komponenty, to nie staje się domyślnie.

Answer 2

Można spróbować użyć pakiet poniżej, ma dobre rozwiązanie dla tego

react-native-tabbar-navigator

Answer 3

zmienić ReactNative 0,11 kodu źródłowego tym przypadku problem.In trzeba go: W kodzie RCTNavigationController dodaj kody:

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

To jest bardziej dogłębna nswer na podstawie this issue in React-Native

Na lewym pasku bocznym Xcode wybierz "Project Manger" (ikona folderu), aby zobaczyć strukturę pliku.

Szczególna folderu szukasz znajduje się pod adresem: [YourAppName]> Biblioteki> React.xcodeproj> React> Widoki

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; 

Nie trzeba dodawać propTypes do NavigatorIOS.ios.js lub TabBarIOS.ios.js

Aby to wszystko działa, każda zakładka pozornie musi mieć swój własny składnik NavigatorIOS.Kiedy miałem kartę po prostu przedstawiam ekran - metoda nawigacji navigation controller: (UINavigationController *) nie jest wywoływana. Nie stanowiło to dla mnie problemu, ponieważ ukrycie navBar można łatwo zrobić za pomocą navigationBarHidden: true.

W moim przypadku miałem TabNav> HomeNav> Homescreen

Podania showTabBar prop w HomeNav:

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

Mam nadzieję, że ktoś pomoże!

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

    ... 

}