https://github.com/unix/react-native-smartbar
Maybe this is the best tabbar , support android and ios !
https://github.com/unix/react-native-smartbar
android bar ios react-naitve smartbar tabbar
Last synced: 3 months ago
JSON representation
Maybe this is the best tabbar , support android and ios !
- Host: GitHub
- URL: https://github.com/unix/react-native-smartbar
- Owner: unix
- Created: 2016-09-05T08:47:45.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-27T15:03:30.000Z (almost 8 years ago)
- Last Synced: 2025-03-19T22:46:48.224Z (3 months ago)
- Topics: android, bar, ios, react-naitve, smartbar, tabbar
- Language: JavaScript
- Homepage:
- Size: 335 KB
- Stars: 29
- Watchers: 5
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# `react-native-smartbar`
Maybe this is the best tabbar. [中文](https://github.com/WittBulter/react-native-smartbar/blob/master/README_CN.md)
>### **Install**
```sh
* 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
```javascript
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 ...
```javascript
// use redux
// toggle
componentWillReceiveProps (nextProps){
this.setState({
toggle: nextProps.toggle
})
}
```
2. Jump
```javascript
this.tabbar=tabbar}
>
// jump
this.tabbar.jumpToIndex(index)
```
OR ...
```javascript
// jump
componentWillReceiveProps (nextProps){
this.setState({
index: nextProps.index
})
}
```
3. Customize
You can customize any style !
```javascript
```
>### **Example**
see /example
>### **Support**
- MAIL `(# = @) => nanazuimeng123#gmail.com`
- [ISSUES](https://github.com/WittBulter/react-native-smartbar/issues)