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