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

Question

我试图在某些页面中隐藏底部的标签栏，但没有成功。

我的路由器设置如下：

• 根目录：switchNav
  • 登录：bottomTabNav
    • 职位：StackNav
      • 第一页：屏幕
      • 第二页：屏幕<-这一个需要隐藏
    • 收入：屏幕
  • 登出：StackNav
    • 登录：屏幕
    • 注册：屏幕

tabBarComponent：CustomTabs

我尝试了2种方法：

1. 简单设置tabBarVisible在第二页上。 不起作用

static navigationOptions = {
    tabBarVisible: false
};

or 

//Edit, forgot to add this
static navigationOptions = ({navigation}) => ({
    tabBarVisible: false
})

2. 似乎是一种怪癖

第二页

componentDidMount(){
   this.props.navigation.setParams({visible: false});
}

CustomTabs

static getDerivedStateFromProps(props, state={}){
    console.log(props.navigation.getParam('visible', 0));
}

or using componentWillReceiveProps()

这个想法是尝试获取一个事件来查看是否加载了此第二页，并将设置为在该CustomTab中不可见。

我没有从getParam得到任何信息，我假设这是因为此页面位于stackNav内部，并且无法传递给tabNav。 但是，当第二页完成加载并调用componentDidMount时，CustomTabs页面中的getDerivedStateProps确实会向其发出事件。

Answer 1

尝试使用

static navigationOptions = ({navigation}) => ({
    tabBarVisible: false
})

代替

static navigationOptions = {
    tabBarVisible: false
};

在某些情况下对我有帮助