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 (
<TabNavigator
tabBarStyle={{height: this.state.tabBarHeight, overflow: 'hidden'}}
sceneStyle={{paddingBottom: this.state.tabBarHeight}}
>
{ /*资源*/ }
<TabNavigator.Item
title="资源"
renderIcon={() => <Image source={require('./../Source/tabbar_src.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('./../Source/tabbar_src_h.png')} style={styles.iconStyle} />}
onPress={() => {this.setState({ selectedTab: 'resource' })}}
selected={this.state.selectedTab === 'resource'}
>
<Navigator
initialRoute={{name:'资源',component:Resource}}
configureScene={(route,navigator)=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component {...route.passProps} navigator={navigator}/>;
}}
/>
</TabNavigator.Item>
{ /*消息*/ }
<TabNavigator.Item
title="消息"
renderIcon={() => <Image source={require('./../Source/tabbar_message.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('./../Source/tabbar_message_h.png')} style={styles.iconStyle} />}
onPress={() => {this.setState({ selectedTab: 'contact' })}}
selected={this.state.selectedTab === 'contact'}
>
<Navigator
initialRoute={{name:'消息',component:Contact}}
configureScene={(route,navigator)=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component {...route.passProps} navigator={navigator}/>;
}}
/>
</TabNavigator.Item>
{ /*班级圈*/ }
<TabNavigator.Item
title="班级圈"
renderIcon={() => <Image source={require('./../Source/tabbar_circle.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('./../Source/tabbar_circle_h.png')} style={styles.iconStyle} />}
onPress={() => {this.setState({ selectedTab: 'classCircle' })}}
selected={this.state.selectedTab === 'classCircle'}>
<Navigator
initialRoute={{
name:'班级圈',
component:ClassCircle,
passProps: {
tabBar: {
hide: () => this.handleTabBar(false),
show: () => this.handleTabBar(true)
}
}
}}
configureScene={(route,navigator)=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component {...route.passProps} navigator={navigator}/>;
}}
/>
</TabNavigator.Item>
{ /*应用*/ }
<TabNavigator.Item
title="应用"
renderIcon={() => <Image source={require('./../Source/tabbar_app.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('./../Source/tabbar_app_h.png')} style={styles.iconStyle} />}
onPress={() => {this.setState({ selectedTab: 'appCenter' })}}
selected={this.state.selectedTab === 'appCenter'}
>
<Navigator
initialRoute={{name:'应用',component:AppCenter}}
configureScene={(route,navigator)=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component {...route.passProps} navigator={navigator}/>;
}}
/>
</TabNavigator.Item>
{ /*我的*/ }
<TabNavigator.Item
title="我的"
renderIcon={() => <Image source={require('./../Source/tabbar_mine_h.png')} style={styles.iconStyle} />}
renderSelectedIcon={() => <Image source={require('./../Source/tabbar_mine.png')} style={styles.iconStyle} />}
onPress={() => {this.setState({ selectedTab: 'mine' })}}
selected={this.state.selectedTab === 'mine'}
>
<Navigator
configureScene={ this._configureScene }
initialRoute={{
name:'我的',
component:Mine,
passProps: {
tabBar: {
hide: () => this.handleTabBar(false),
show: () => this.handleTabBar(true)
}
}
}}
configureScene={(route,navigator)=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route,navigator)=>{
let Component = route.component;
return <Component {...route.passProps} navigator={navigator}/>;
}}
/>
</TabNavigator.Item>
</TabNavigator>
);
}
至此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
