2015-05-16 10 views
5

मूल आईओएस में, ऐसा लगता है कि नेविगेशन इंटरफ़ेस (http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/) में टैब बार को छिपाना बहुत आसान है, लेकिन प्रतिक्रिया मूल में, ऐसा लगता है कि इसे कार्यान्वित करना इतना आसान नहीं है। यहां तक ​​कि मैं ओवरराइड hidesBottomBarWhenPushed RCTWrapperViewController के लिए विधि:प्रतिक्रिया मूल में नेविगेशन इंटरफ़ेस में टैब बार कैसे छिपाएं?

- (BOOL) hidesBottomBarWhenPushed 
{ 
    return YES; 
} 
+0

https://stackoverflow.com/questions/30266831/hide-show-components-in-react-native इस की जाँच करें। – ogelacinyc

उत्तर

0

में दो प्रमुख नेविगेटर घटकों रहे हैं देशी प्रतिक्रिया: Navigator और NavigatorIOS

  • प्रलेखन में प्रत्येक का good comparison of the pros and cons है।

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

    प्रतिक्रिया देशी documentation देखें:


नेवबार को छिपाने के लिए true को navigationBarHidden प्रॉपर्टी सेट NavigatorIOS घटकों

के लिए नेवबार छिपाई जा रही है।

नेविगेटर घटकों

के लिए नेवबार छिपाई जा रही है के बाद से नेवबार provided explicitlyNavigator के लिए घटकों है, यह डिफ़ॉल्ट रूप से प्रदान की गई नहीं है।

+0

मुझे लगता है कि यह व्यक्ति TabBarIOS को छिपाने का एक तरीका ढूंढ रहा है, न कि NavigatorIOS (नीचे टैब बार बनाम शीर्ष नौसेना बार) – powers

+0

हां, मुझे ऐप में TabBarIOS को छिपाने की भी आवश्यकता है। मेरे टैब में से एक पूर्ण स्क्रीन होने की आवश्यकता है यानी जब तक आप पूर्ण स्क्रीन डिस्प्ले पर टैप न करें, तब तक कोई टैब बार प्रदर्शित न हो। –

+0

मैंने गिटहब पर सवाल दर्ज किया https://github.com/facebook/react-native/issues/3482 –

0

मैं इस problem.In मामले के लिए 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; 
} 
3

यह गहराई से अधिक है this issue in React-Native

एक्सकोड के लेफ्टथैंड साइडबार में, फ़ाइल संरचना को देखने के लिए 'प्रोजेक्ट मैनेजर' (फ़ोल्डर आइकन) चुनें। [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) 
:

विशेष फ़ोल्डर आप देख रहे हैं में पाया जाता है

आरसीटीएनविगेटर.एम

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

मैं यह सब काम करने के लिए आदेश में NavigatorIOS.ios.js को propTypes या TabBarIOS.ios.js

जोड़ने की जरूरत नहीं किया था, प्रत्येक टैब प्रतीत होता है अपने स्वयं के NavigatorIOS घटक की जरूरत है।जब मेरे पास टैब बस एक स्क्रीन प्रस्तुत करता था - (शून्य) नेविगेशन नियंत्रक: (UINavigationController *) नेविगेशन नियंत्रक ... विधि नहीं कहा जाता है। यह मेरे लिए कोई मुद्दा नहीं था, क्योंकि नेविबार को छिपाने के लिए नेविगेशन के साथ आसानी से किया जाता है: सही।

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

मुझे आशा है कि यह किसी को मदद मिलती है:

मेरे मामले में मैं एक TabNav> HomeNav> होमस्क्रीन

पासिंग HomeNav में सहारा showTabBar था!

+0

यह ऐसी चीजें हैं जो वास्तव में मुझे चिंता करती है कि हम इसे उत्पादन के लिए उपयोग कर रहे हैं: डी धन्यवाद! – Starchand

-1

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

    ... 

} 
संबंधित मुद्दे