Skip to content
Maybe this is the best tabbar , support android and ios !
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
README.md
README_CN.md
index.js
item.js
package.json

README.md

react-native-smartbar

Maybe this is the best tabbar. 中文

Install

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

Get Started

  • DEMO

    Witt Bulter

  • toggle the bar

    Witt Bulter

  • only image

    If you just want to show the image, do not fill in [text(TabBar.Item)] Witt Bulter

  • only text

    If you just want to show the text, do not fill in [image(TabBar.Item)] Witt Bulter

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
You can’t perform that action at this time.