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

- (BOOL) hidesBottomBarWhenPushed
{
  return YES;
}

===============>>#1 票数:6

基于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: { ...},
        }}/>
      );
    }
  }

我希望这可以帮助别人!

===============>>#2 票数:0

React native中有两个主要的Navigator组件: NavigatorNavigatorIOS


隐藏NavigatorIOS组件的导航栏

navigationBarHidden属性设置为true以隐藏导航栏:

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

请参阅React本机文档

隐藏Navigator组件的导航栏

由于navbar是为Navigator组件显式提供的 ,因此默认情况下不会呈现它。

===============>>#3 票数:0

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

反应天然-的TabBar导航仪

在此输入图像描述

===============>>#4 票数:0

我为此问题更改了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;
}

===============>>#5 票数:0

如果您使用的是react-navigation包,则非常简单:

class ScreenWhereTabbarIsHidden extends React.Component {
  static navigationOptions = {
    tabBarVisible: false,
  }
}

===============>>#6 票数:-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);
  }

  ...

}

  ask by Yong translate from so

未解决问题?本站智能推荐:

1回复

在React导航中动态隐藏标签栏

我的React本机应用程序具有以下嵌套的导航结构 例如 这种结构的一个问题是,在堆栈(聊天或任务)的内部嵌套页面中,我需要隐藏底部的标签栏。 我可以使用此https://reactnavigation.org/docs/tab-navigator.html#tabbarvi
1回复

如何在react-native中的导航器中使用标签栏

我现在在这个问题上遇到了麻烦。 因为有些屏幕不使用标签栏,而且我需要在导航栏中使用矢量图标,而不是使用react-native-tabbar-navigator,所以我尝试在导航器中使用标签栏,如下所示。 但是,当我单击TabBarItemIOS按钮时,根本不会调用onPress事
2回复

使用react-native中的Animation隐藏和显示createBottomTabNavigator标签栏

我正在使用createBottomTabNavigator的标签栏。 我可以通过将tabBarVisible设置为true或false来隐藏和显示tabbar。 我的问题是,我希望它与动画一起隐藏。 任何链接都将有所帮助。
1回复

如何在React Native(react-native-router-flux)中隐藏特定场景的标签栏?

我正在尝试隐藏应用程序中特定页面的整个标签栏。 我也试图将其隐藏在路由和容器内部。 但是,它没有用。 在这两种情况下,我都可以隐藏标题导航栏,但不适用于tabBar。 以下是我的尝试代码: 下面的方法也不起作用 我已经检查了源代码,并且有一种逻辑可以隐藏选项卡(尽管没有深
1回复

在react-native-router-flux标签栏中隐藏Navbar

本机路由器通量的标签栏”。 当我使用标签栏时,会在屏幕顶部显示导航栏。 所以我想删除那个导航栏。 但是我做不到。 请帮助我!
15回复

React Navigation如何从堆栈导航中隐藏标签栏

我有以下堆栈导航和屏幕: 我只想在ProductDetailsS​​creen中隐藏选项卡 无法将任何选项从堆栈导航传递到选项卡导航的问题 并非所有堆栈屏幕都只有其中之一
1回复

React Native-导航器和标签栏集成

我一直在尝试找到一种集成TabBarIOS和Navigator的解决方案,而且一直空着。 基本上,我要解决的问题是拥有一个在启动时显示登录屏幕的屏幕(不带标签),然后导航至包含标签的主屏幕。 这是我的索引,登录屏幕,标签栏组件和导航器组件文件。 如果有人有任何建议,我将不胜感激!
1回复

使用react-navigation在react-native中隐藏某些页面的底部标签栏

我试图在某些页面中隐藏底部的标签栏,但没有成功。 我的路由器设置如下: 根目录:switchNav 登录:bottomTabNav 职位:StackNav 第一页:屏幕 第二页:屏幕
2回复

如何在带有React Navigation的React Native中以编程方式在Android上隐藏标签栏?

我正在使用带有Expo的Create React Native App来构建应用程序。 按下TextInput时,我需要在特定视图中隐藏底部的标签栏。 Android默认情况下会向上推选项卡。 我不会触发标签栏隐藏,因为当不显示键盘时,标签栏必须在视图中。 我将各种堆栈导出为c
1回复

反应本机导航自定义标签栏图标

是否可以使用自定义组件(Button或其他)而不是选项卡栏中的简单图标? 我需要像这样动态设置我的标签栏图标 还是我们只能使用图标? 有什么办法吗?