上一篇记录了tabbar+navigation切换页面,但是有一个问题,当push到第二级页面时,tabbar还在。
有些项目要求二级页面隐藏tabbar,所以现在再开一篇文章记录下
普通的tabbar+navigation的结构是:
tabbar->tabbarItem->navigator->homeView
但是想实现二级页面隐藏tabbar,这个结构就不行了,需要换一种结构
navigation->tabbar->tabbarItem->homeView
这样的结构才可以实现二级页面隐藏tabbar
main.js
export default class HomePageTabbarHidden extends Component {
componentDidMount() {
<StatusBar barStyle={'light-content' }/>
}
render() {
return (
//此处加载 导航条
<HPTB_Navigator/>
);
}
}
navigator.js
render(){
return(
//此处的 HPTBtabbar 就是tabbar
<Navigator
initialRoute={{ name: 'HPTBtabbar', component: HPTBtabbar }}//默认加载的页面
configureScene={this.configureScene}
renderScene={this.renderScene}
style={{flex:1}}
navigationBar={
<Navigator.NavigationBar style={HomePageNavStyle.navStyleBase}
routeMapper={NavigationBarRouteMapper}/>}
/>
)
}
tabbar.js
render() {
return (
<TabNavigator>
<TabNavigator.Item
title='主页'
onPress={()=>{this.setState({selectedTab:'HomeView'})}}
selected={this.state.selectedTab === 'HomeView'}
titleStyle={HPTB_tabbarStyle.textStyle}
selectedTitleStyle={HPTB_tabbarStyle.selectedTextStyle}
>
//此处加载页面,这种方式解决push不过去的问题
<HomeView navigator={this.props.navigator} />
</TabNavigator.Item>
<TabNavigator.Item
title='次页'
onPress={()=>{this.setState({selectedTab:'HomeView1'})}}
selected={this.state.selectedTab === 'HomeView1'}
titleStyle={HPTB_tabbarStyle.textStyle}
selectedTitleStyle={HPTB_tabbarStyle.selectedTextStyle}
>
<HomeView1 navigator={this.props.navigator} />
</TabNavigator.Item>
</TabNavigator>
);
}
项目地址:https://github.com/chjwrr/RN-tabbar-navigation