关于react native tabbar隐藏

效果图:

效果图.gif

1.在tabbar下提供一个隐藏tabbar与否的参数

getInitialState(){
        return{
            tabType:'1',
            hiddenTab:false,
        }
 },

2.布局的时候根据hiddenTab改变tabbar的位置

var bottom = this.state.hiddenTab==true?-49:0;
return(
 <TabBarIOS style={[commonStyles.flex,{marginBottom:bottom}]}>

3.添加tabbar隐藏函数,并作为参数传递

hiddenTabbar:function (hidden:boolean) {
        this.setState({
            hiddenTab:hidden
        })
    }
<TabBarIOS.Item
                    title="项目列表"
                    icon={require('../images/MainView/tab_project@2x.png')}
                    selectedIcon={require('../images/MainView/tab_project_pre@2x.png')}
                    selected={this.state.tabType=='1'}
                    onPress={this.changeController.bind(this,'1')}>
                    <Project nextPage={this.hiddenTabbar}></Project>
</TabBarIOS.Item>

4.相关操作后,隐藏tabbar,我这里是点击cell进入下一界面

 _pressRow:function (rowData: id,rowID: number) {
        
        this.props.hiddenTabbar(true)
},

最后编辑于：2017.12.05 23:34:28

关于react native tabbar隐藏

推荐阅读更多精彩内容