unix/react-native-smartbar

Maybe this is the best tabbar , support android and ios !

react-native-smartbar

Maybe this is the best tabbar. 中文

Install

* install with npm
sudo npm i react-native-smartbar --save

Get Started

• 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)]

documentation

• TabBar

attribute	type	required	description	example
activeColor	string	false	active color	activeColor={'#FE985B'}
toggleBar	bool	false	hide and show	toggleBar={this.state.toggle}
height	number	false	default value = 45px	height={50}
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}}

Features

1. Show and hide

       <TabBar
              // ...
               ref={tabbar=> this.tabbar=tabbar}
       >
   
       // you can pass the handle to the next page
       // toggle 
       this.tabbar.toggleBar()
    
       // OR set bool
       this.tabbar.toggleBar(true)
       this.tabbar.toggleBar(false)

   OR ...

   // use redux
      <TabBar
             // ...
              toggleBar={this.state.toggle}
      >
   
      // toggle 
      componentWillReceiveProps (nextProps){
      		this.setState({
      			toggle: nextProps.toggle
      		})
      }
       

2. 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
           })
      }
       

3. Customize

   You can customize any style !

      <TabBar
             // ...
              style={{...}}
      >
          <TabBar.Item
              // ...
              style={{...}}
           >
              <Index />
           </TabBar.Item>    
      </TabBar>
       

Example

see /example

Support

• MAIL (# = @) => nanazuimeng123#gmail.com
• ISSUES