react-native-smartbar

tabbar react-native android ios


Keywords
tabbar, react-native, android, ios
License
ISC
Install
npm install react-native-smartbar@0.1.5

Documentation

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