如何隐藏React Native中导航界面中的标签栏？

Question

在Native IOS中,似乎很容易隐藏导航界面中的标签栏(http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/),但是在React Native中,似乎实现它并不那么容易.即使我重写hidesBottomBarWhenPushed的方法RCTWrapperViewController:

- (BOOL) hidesBottomBarWhenPushed
{
  return YES;
}

Answer 1

基于React-Native中的这个问题,这是一个更深入的答案

在Xcode的左侧边栏中,选择"Project Manger"(文件夹图标)以查看文件结构.

您正在寻找的特定文件夹位于:[YourAppName]>库> React.xcodeproj> React> Views

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;

我不需要将propTypes添加到NavigatorIOS.ios.js或TabBarIOS.ios.js

为了使这一切都能正常工作,每个标签看起来都需要有自己的NavigatorIOS组件.当我让选项卡只显示一个屏幕 - (void)navigationController:(UINavigationController*)navigationController ...方法不会被调用.这对我来说不是问题,因为使用navigationBarHidden:true可以轻松隐藏navBar.

在我的情况下,我有一个TabNav> HomeNav> HomeScreen

在HomeNav中传递showTabBar道具:

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

我希望这可以帮助别人!

Answer 2

您可以尝试使用下面的包，它对此有一个很好的解决方案

反应本机标签栏导航器