RN笔记-TabNavigator隐藏Tabbar 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方法是在组件将要被销毁时调用。