WIX Navigation V2 - 推送到新屏幕时隐藏底部标签栏

Posted 2023-02-16

【中文标题】WIX Navigation V2 - 推送到新屏幕时隐藏底部标签栏

【英文标题】：WIX Navigation V2 - Hide bottom tab bar when push to a new screen

【发布时间】：2019-01-19 05:13:39

【问题描述】：

问题描述

我有 TabBar 基本应用程序，在我的一个选项卡中，我需要将其推送到另一个屏幕，但标签栏不应显示在推送的屏幕中。但是底部栏仍然存在于推送的屏幕中。 我想要实现的不是完全隐藏底部标签栏，而是将推送的屏幕放在标签栏的顶部。

复制步骤/代码片段/屏幕截图

这是我显示标签栏应用程序的代码：

bottomTabs: id: 'BottomTabsId', children: [ stack: children: [ component: name: 'Home', options: topBar: backButton: title: 'Back', , title: text: 'Home' , bottomTab: fontSize: 12, text: 'Home', icon: require('./src/assets/home.png'), selectedIcon: require('./src/assets/home_active.png') , , , ] , stack: children: [ component: name: 'Booking', options: topBar: title: text: 'Booking' , bottomTab: text: 'Booking', fontSize: 12, icon: require('./src/assets/booking.png'), selectedIcon: require('./src/assets/booking_active.png') , ], , , ], ,

标签栏仍然存在 :(

我想要实现的是这个

---

环境

React Native Navigation 版本：2.0.2454 React Native 版本：0.56 平台（ios、android 或两者？）：IOS 设备信息（模拟器/设备？操作系统版本？调试/发布？）：模拟器 IOS 11

【参考方案1】：

对于android v2中的隐藏底部标签

componentDidMount() 
    Navigation.mergeOptions(this.props.componentId, 
        bottomTabs: 
          visible: false,
          drawBehind:true
        
      );

【参考方案2】：

我也面临同样的问题。我找到了一种在推送新屏幕时以编程方式隐藏tabs 的方法。

您可以在新推送的屏幕中使用隐藏标签。在构造函数中编写以下切换。

this.props.navigator.toggleTabs(
      to: 'hidden',
      animated: false,
    );

【讨论】：

这看起来像 v1 语法

【参考方案3】：

您需要使用bottomTabs.visible: false 选项推送该屏幕：

Navigation.push(this.props.componentId, 
  component: 
    name: 'your.component.name',
    options: 
      bottomTabs: 
        visible: false,
        drawBehind: true
      
    
  
);

【讨论】：

它在 iOS 和 Android 上都不起作用？可以试试最新的react-native-navigation吗？