Làm thế nào để ẩn thanh tab trong giao diện điều hướng trong React Native?

Question

Trong IOS gốc, có vẻ rất dễ dàng để ẩn thanh tab trong giao diện Điều hướng (http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/), nhưng trong Phản ứng Gốc, có vẻ như không dễ dàng hơn để thực hiện điều đó. Thậm chí, tôi ghi đè hidesBottomBarWhenPushed phương pháp RCTWrapperViewController:

- (BOOL) hidesBottomBarWhenPushed 
{ 
    return YES; 
} 

Answer 1

Có hai thành phần Navigator chính trong Phản ứng tự nhiên: Navigator và NavigatorIOS.

• Tài liệu có một số good comparison of the pros and cons.

---

Ẩn thanh điều hướng cho NavigatorIOS thành phần

Đặt navigationBarHidden tài sản để true để ẩn navbar:

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

Xem Phản ứng tự nhiên documentation.

Ẩn thanh điều hướng cho Navigator thành phần

Kể từ khi navbar là provided explicitly cho Navigator thành phần, nó không được trả lại theo mặc định.

Answer 2

Bạn có thể thử bằng cách sử dụng gói dưới đây, nó có một giải pháp tốt cho việc này

react-native-tabbar-navigator

Answer 3

tôi thay đổi mã nguồn ReactNative 0,11 đối với trường hợp problem.In này bạn cần nó: Trong RCTNavigationController, hãy thêm mã:

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

Đây là một chiều sâu hơn nswer dựa trên this issue in React-Native

Trong thanh bên trái của Xcode, chọn 'Project Manger' (biểu tượng thư mục) để xem cấu trúc tệp.

Các thư mục cụ thể bạn đang tìm kiếm được tìm thấy tại địa chỉ: [YourAppName]> Thư viện> React.xcodeproj> Phản ứng> Lần

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; 

tôi không cần thêm propTypes để NavigatorIOS.ios.js hoặc TabBarIOS.ios.js

Để cho tất cả điều này để làm việc, mỗi tab dường như cần phải có thành phần NavigatorIOS riêng của mình.Khi tôi đã có tab chỉ đơn giản là trình bày một màn hình - (void) navigationController: (UINavigationController *) navigationController ... phương pháp không được gọi. Đây không phải là một vấn đề đối với tôi, bởi vì ẩn navBar dễ dàng thực hiện với navigationBarHidden: true.

Trong trường hợp của tôi, tôi đã có một TabNav> HomeNav> Homescreen

Passing showTabBar chống đỡ trong HomeNav:

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

Tôi hy vọng điều này sẽ giúp người!

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

    ... 

}