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

Question

问题说明

我有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') } } }, } ], }, }, ], },

标签栏仍然存在：（

我要实现的目标是

---

环境

• 反应本机导航版本：2.0.2454
• 原生版本：0.56
• 平台（iOS，Android还是两者都使用）：IOS
• 设备信息（模拟器/设备？操作系统版本？调试/发布？）：模拟器IOS 11

Answer 1

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

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

Answer 2

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

您可以使用在新推送的屏幕中隐藏选项卡。在构造函数内部编写以下切换。

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

Answer 3

对于android，在v2中隐藏底部标签

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