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

Question

Issue Description

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

Steps to Reproduce / Code Snippets / Screenshots

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

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

标签栏仍然存在:(

我想要实现的是这个

---

Environment

• React Native Navigation版本：2.0.2454
• React Native版本：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的方法。

您可以使用隐藏新推屏幕中的选项卡。在构造函数中写下面的toggle。

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

Answer 3

对于android隐藏在v2中的底部选项卡

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