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

• TabBar.Item

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