Maybe this is the best tabbar
-
DEMO
-
toggle the bar
-
only image
If you just want to show the image, do not fill in [text(TabBar.Item)]
-
only text
If you just want to show the text, do not fill in [image(TabBar.Item)]
- TabBar
attribute | type | required | description | example |
---|---|---|---|---|
activeColor | string | false | active color | activeColor={'#FE985B'} |
toggleBar | bool | false | hide and show | toggleBar={this.state.toggle} |
index | number | false | jump index and default index | index={this.state.index} |
style | style | false | footer bar style | style={{height: 500}} |
- TabBar.Item
attribute | type | required | description | example |
---|---|---|---|---|
icon | image | false | default icon | icon={require('./img/abc.png')} |
selectedIcon | image | false | active icon | icon={require('./img/abc_2.png')} |
text | string | false | default text | text={'List'} |
style | style | false | footer bar style | style={{height: 500}} |
-
Show and hide
<TabBar // ... ref={tabbar=> this.tabbar=tabbar} > // toggle this.tabbar.toggleBar() // OR set bool this.tabbar.toggleBar(true) this.tabbar.toggleBar(false)
OR ...
<TabBar // ... toggleBar={this.state.toggle} > // toggle componentWillReceiveProps (nextProps){ this.setState({ toggle: nextProps.toggle }) }
-
Jump
<TabBar // ... ref={tabbar=> this.tabbar=tabbar} > // jump this.tabbar.jumpToIndex(index)
OR ...
<TabBar // ... index={this.state.index} > // jump componentWillReceiveProps (nextProps){ this.setState({ index: nextProps.index }) }
-
Customize
You can customize any style !
<TabBar // ... style={{...}} > <TabBar.Item // ... style={{...}} > <Index /> </TabBar.Item> </TabBar>
see /example
- MAIL
(# = @) => nanazuimeng123#gmail.com
- ISSUES