美文网首页
React Native隐藏/显示UITabBar

React Native隐藏/显示UITabBar

作者: TroyZhang | 来源:发表于2016-05-27 17:56 被阅读253次
    // RCTTabBar.h
    - (UITabBar *)tabBar;
    
    // RCTTabBar.m
    - (UITabBar *)tabBar
    {
        return _tabController.tabBar;
    }
    
    // RCTTabBarManager.m
    RCT_EXPORT_METHOD(showTabBar:(nonnull NSNumber *)reactTag
                      animated:(BOOL)animated)
    {
      [self.bridge.uiManager addUIBlock:
       ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry){
           RCTTabBar *rctTabBar = viewRegistry[reactTag];
           UITabBar *tabBar = [rctTabBar tabBar];
           [self toggleTabBar:tabBar withShow:YES withAnimated:animated];
       }];
    }
    
    RCT_EXPORT_METHOD(hideTabBar:(nonnull NSNumber *)reactTag
                      animated:(BOOL)animated)
    {
        [self.bridge.uiManager addUIBlock:
         ^(__unused RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry){
             RCTTabBar *rctTabBar = viewRegistry[reactTag];
             UITabBar *tabBar = [rctTabBar tabBar];
             [self toggleTabBar:tabBar withShow:NO withAnimated:animated];
         }];
    }
    
    - (void)toggleTabBar:(UITabBar *)tabBar withShow:(BOOL)isShow withAnimated:(BOOL)animated
    {
        CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;
        CGFloat screenHeight = [[UIScreen mainScreen] bounds].size.height;
        BOOL isCurrentShow = (tabBar.frame.origin.y == (screenHeight - 49));
        CGFloat y = isShow ? (screenHeight - 49) : screenHeight;
        CGRect frame = CGRectMake(0, y, screenWidth, 49);
        if(animated)
        {
            [UIView animateWithDuration:0.3 animations:^{
                tabBar.frame = frame;
            }];
        }
        else
        {
            tabBar.frame = frame;
        }
    }
    
    // TabBarIOS.ios.js
    var TabBarManager = require('NativeModules').TabBarManager;
    var findNodeHandle = require('findNodeHandle');
    
    var TabBarIOS = React.createClass({
        hideTabBar: function(animated=true)
        {
            TabBarManager.hideTabBar(findNodeHandle(global.tabBar), animated);
        },
        showTabBar: function(animated=true)
        {
            TabBarManager.showTabBar(findNodeHandle(global.tabBar), animated);
        },
    });
    
    // 使用
    <TabBarIOS
        ref={(tabBar)=>{global.tabBar = tabBar;}}>
    ...
    </TabBarIOS>
    
    // 显示
    global.tabBar.showTabBar();
    
    // 隐藏
    global.tabBar.hideTabBar();
    

    相关文章

      网友评论

          本文标题:React Native隐藏/显示UITabBar

          本文链接:https://www.haomeiwen.com/subject/dakfdttx.html