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

Question

在 Native IOS 中，在导航界面( http://www.appcoda.com/ios-programming-101-how-to-hide-tab-bar-navigation-controller/ )中隐藏选项卡栏似乎很容易，但在 React Native 中，实现这一点似乎并不那么容易。即使我覆盖了 按下时隐藏底部栏 的方法RCTWrapperViewController :

- (BOOL) hidesBottomBarWhenPushed
{
  return YES;
}

Answer 1

这是基于 this issue in React-Native 的更深入的答案

在 Xcode 的左侧边栏中，选择“项目管理器”(文件夹图标)以查看文件结构。

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

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 可以轻松隐藏导航栏。

就我而言，我有一个 TabNav > HomeNav > HomeScreen

在 HomeNav 中传递 showTabBar Prop :

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

我希望这可以帮助别人!