美文网首页
关于react native tabbar隐藏

关于react native tabbar隐藏

作者: 维子Vanessa | 来源:发表于2017-02-21 12:10 被阅读772次

效果图:

效果图.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)
},

相关文章

网友评论

      本文标题:关于react native tabbar隐藏

      本文链接:https://www.haomeiwen.com/subject/xiwywttx.html