React-Native-TabNavigator+Naviga

上一篇记录了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>


        );
    }

tabbarhiddent.gif
项目地址：https://github.com/chjwrr/RN-tabbar-navigation