本文共 3915 字，大约阅读时间需要 13 分钟。

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

转载地址：http://oseni.baihongyu.com/