RN笔记-TabNavigator隐藏Tabbar

rn页面之间跳转时默认一直显示tabbar，然而在开发过程中必须要切换tabbar的显示和隐藏。在尝试过很多次之后终于找到了解决办法。解决的思路是，动态改变tabbar的高度。

定义tabbar的显示高度tabBarHeight

  getInitialState() {
    return {
      selectedTab:'classCircle',
      tabBarHeight: 49
    }
  },

  handleTabBar(state){
    this.setState({
      tabBarHeight: state ? 49 : 0
    });
  },

设置TabNavigator 的tabBarStyle样式，并在initialRoute 中定义tabar的 hide和show属性。以班级圈模块为例。

  render() {
    return (
      
        { /*资源*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'resource' })}}
          selected={this.state.selectedTab === 'resource'}
          >
          {
              return Navigator.SceneConfigs.PushFromRight;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return ;
            }}
          />
        
        { /*消息*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'contact' })}}
          selected={this.state.selectedTab === 'contact'}
          >
            {
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return ;
              }}
            />
        
        { /*班级圈*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'classCircle' })}}
          selected={this.state.selectedTab === 'classCircle'}>
           this.handleTabBar(false),
                  show: () => this.handleTabBar(true)
                }
              }
            }}
            configureScene={(route,navigator)=>{
              return Navigator.SceneConfigs.PushFromRight;
            }}
            renderScene={(route,navigator)=>{
              let Component = route.component;
              return ;
            }}
          />
        
        { /*应用*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'appCenter' })}}
          selected={this.state.selectedTab === 'appCenter'}
          >
            {
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return ;
              }}
            />
        
        { /*我的*/ }
         }
          renderSelectedIcon={() => }
          onPress={() => {this.setState({ selectedTab: 'mine' })}}
          selected={this.state.selectedTab === 'mine'}
          >
             this.handleTabBar(false),
                    show: () => this.handleTabBar(true)
                  }
                }
              }}
              configureScene={(route,navigator)=>{
                return Navigator.SceneConfigs.PushFromRight;
              }}
              renderScene={(route,navigator)=>{
                let Component = route.component;
                return ;
              }}
            />
        

      
    );
  }

至此Tabbar的隐藏和显示属性已经定义完毕，接下来就要在push页面时做如下操作。

  pushToDetail(url){
      if (url == 'Consult') {
        this.props.navigator.push(
          {
            component:Consult,//要跳转的版块
            passProps:{
              'url':url,
              tabBar: {
                hide: () => this.props.tabBar.hide(),
                show: () => this.props.tabBar.show()
              }
            }
          }
        );
      }
    },

需要了解Component组件的生命周期，componentWillMount方法是在组件将要被渲染时调用，componentWillUnmount方法是在组件将要被销毁时调用。

  // 渲染组件时隐藏tabbar 
  componentWillMount(){
    this.props.tabBar.hide();
  },

  // 销毁组件时显示tabbar
  componentWillUnmount(){
    this.props.tabBar.show();
  },

附效果图：

1.gif