├── README.md
├── README_CN.md
├── example
    ├── index.js
    ├── list.js
    ├── me.js
    └── tabbar-example.js
├── index.js
├── item.js
└── package.json


/README.md:
--------------------------------------------------------------------------------
  1 | # `react-native-smartbar`
  2 | Maybe this is the best tabbar. [中文](https://github.com/WittBulter/react-native-smartbar/blob/master/README_CN.md)
  3 | 
  4 | >### **Install**  
  5 | 
  6 | ```sh
  7 | * install with npm
  8 | sudo npm i react-native-smartbar --save
  9 | ```
 10 | 
 11 | >### **Get Started**  
 12 | 
 13 | - DEMO
 14 | 
 15 |     ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo.gif?imageView2/1/w/140/h/280)
 16 | 
 17 | - toggle the bar
 18 | 
 19 |     ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-2.gif?imageView2/1/w/140/h/280)
 20 | 
 21 | - only image
 22 | 
 23 |     If you just want to show the image, do not fill in [text(TabBar.Item)]
 24 | ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-3.png?imageView1/1/w/500/h/110)
 25 | - only text
 26 | 
 27 |     If you just want to show the text, do not fill in [image(TabBar.Item)]
 28 |  ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-4.png?imageView1/1/w/500/h/110)
 29 | 
 30 | 
 31 | 
 32 | >### **documentation**    
 33 | 
 34 | - TabBar
 35 | 
 36 | | attribute   | type   | required | description                  | example                       |
 37 | | ----------- | ------ | -------- | ---------------------------- | ----------------------------- |
 38 | | activeColor | string | false    | active color                 | activeColor={'#FE985B'}       |
 39 | | toggleBar   | bool   | false    | hide and show                | toggleBar={this.state.toggle} |
 40 | | height      | number | false    | default value = 45px         | height={50}                   |
 41 | | index       | number | false    | jump index and default index | index={this.state.index}      |
 42 | | style       | style  | false    | footer bar style             | style={{height: 500}}         |
 43 | 
 44 | 
 45 | - TabBar.Item
 46 | 
 47 | | attribute    | type   | required | description      | example                           |
 48 | | ------------ | ------ | -------- | ---------------- | --------------------------------- |
 49 | | icon         | image  | false    | default icon     | icon={require('./img/abc.png')}   |
 50 | | selectedIcon | image  | false    | active icon      | icon={require('./img/abc_2.png')} |
 51 | | text         | string | false    | default text     | text={'List'}                     |
 52 | | style        | style  | false    | footer bar style | style={{height: 500}}             |
 53 | 
 54 | 
 55 | 
 56 | >### **Features**   
 57 | 
 58 | 1. Show and hide
 59 |     
 60 |     ```javascript
 61 |         <TabBar
 62 |                // ...
 63 |                 ref={tabbar=> this.tabbar=tabbar}
 64 |         >
 65 | 
 66 |         // you can pass the handle to the next page
 67 |         // toggle 
 68 |         this.tabbar.toggleBar()
 69 |      
 70 |         // OR set bool
 71 |         this.tabbar.toggleBar(true)
 72 |         this.tabbar.toggleBar(false)
 73 |     ```
 74 |     
 75 |     OR ...
 76 |     
 77 |     ```javascript
 78 |     // use redux
 79 |        <TabBar
 80 |               // ...
 81 |                toggleBar={this.state.toggle}
 82 |        >
 83 |     
 84 |        // toggle 
 85 |        componentWillReceiveProps (nextProps){
 86 |        		this.setState({
 87 |        			toggle: nextProps.toggle
 88 |        		})
 89 |        }
 90 |         
 91 |     ```
 92 | 
 93 | 2. Jump 
 94 |     ```javascript
 95 |         <TabBar
 96 |                // ...
 97 |                 ref={tabbar=> this.tabbar=tabbar}
 98 |         >
 99 |      
100 |         // jump
101 |         this.tabbar.jumpToIndex(index)
102 |      
103 |     ```
104 |     OR ...
105 |     
106 |     ```javascript
107 |        <TabBar
108 |               // ...
109 |                index={this.state.index}
110 |        >
111 |     
112 |        // jump 
113 |        componentWillReceiveProps (nextProps){
114 |             this.setState({
115 |                 index: nextProps.index
116 |             })
117 |        }
118 |         
119 |     ```
120 | 
121 | 3. Customize
122 | 
123 |     You can customize any style !
124 |     ```javascript
125 |        <TabBar
126 |               // ...
127 |                style={{...}}
128 |        >
129 |            <TabBar.Item
130 |                // ...
131 |                style={{...}}
132 |             >
133 |                <Index />
134 |             </TabBar.Item>    
135 |        </TabBar>
136 |         
137 |     ```
138 | 
139 | 
140 | >### **Example**  
141 |  
142 |     see /example
143 | 
144 | >### **Support**      
145 | 
146 | - MAIL   `(# = @) => nanazuimeng123#gmail.com`
147 | - [ISSUES](https://github.com/WittBulter/react-native-smartbar/issues)
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 
168 | 


--------------------------------------------------------------------------------
/README_CN.md:
--------------------------------------------------------------------------------
  1 | # `react-native-smartbar`
  2 | 可能是最好的tabbar。[English](https://github.com/WittBulter/react-native-smartbar/blob/master/README.md)
  3 | 
  4 | 
  5 | >### **下载**  
  6 | 
  7 | ```sh
  8 | * 从npm库下载
  9 | sudo npm i react-native-smartbar --save
 10 | ```
 11 | 
 12 | 
 13 | >### **开始**  
 14 | 
 15 | - 效果展示
 16 | 
 17 |     ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo.gif?imageView2/1/w/140/h/280)
 18 | 
 19 | - 显示/隐藏
 20 | 
 21 |     ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-2.gif?imageView2/1/w/140/h/280)
 22 | 
 23 | - 只显示图片
 24 | 
 25 |     如果你希望只显示图片, 忽略此项属性即可： [text(TabBar.Item)]
 26 | ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-3.png?imageView1/1/w/500/h/110)
 27 | - 只显示文字
 28 | 
 29 |     如果你希望只显示文字, 忽略此项属性即可： [image(TabBar.Item)]
 30 |  ![Witt Bulter](http://obqqxnnm4.bkt.clouddn.com/demo-4.png?imageView1/1/w/500/h/110)
 31 | 
 32 | 
 33 | 
 34 | >### **文档**    
 35 | 
 36 | - TabBar(底部bar)
 37 | 
 38 | | 属性   | 类型   | 必须 | 描述                  | 例子                       |
 39 | | ----------- | ------ | -------- | ---------------------------- | ----------------------------- |
 40 | | activeColor | string | 否    | 激活颜色                 | activeColor={'#FE985B'}       |
 41 | | toggleBar   | bool   | 否    | 显示与隐藏                | toggleBar={this.state.toggle} |
 42 | | height      | number | 否    | 高度，默认高度45px         | height={50}                   |
 43 | | index       | number | 否    | 跳转至指定路由 | index={this.state.index}      |
 44 | | style       | style  | 否    | 自定义样式             | style={{height: 500}}         |
 45 | 
 46 | 
 47 | - TabBar.Item(底部bar的每一个子项)
 48 | 
 49 | | 属性    | 类型   | 必须 | 描述      | 例子                           |
 50 | | ------------ | ------ | -------- | ---------------- | --------------------------------- |
 51 | | icon         | image  | 否    | 默认图标(图片)     | icon={require('./img/abc.png')}   |
 52 | | selectedIcon | image  | 否    | 激活时图标(图片)     | icon={require('./img/abc_2.png')} |
 53 | | text         | string | 否    | 默认文字     | text={'List'}                     |
 54 | | style        | style  | 否    | 自定义样式 | style={{height: 500}}             |
 55 | 
 56 | 
 57 | 
 58 | >### **特点**   
 59 | 
 60 | 1. 简单敏捷的控制显示/隐藏
 61 |     
 62 |     ```javascript
 63 |         <TabBar
 64 |                // ...
 65 |                 ref={tabbar=> this.tabbar=tabbar}
 66 |         >
 67 | 
 68 |         // 你可以将 [this.tabbar] 传入至下个页面，参考react通信方式
 69 |         // 函数控制
 70 |         this.tabbar.toggleBar()
 71 |      
 72 |         // 或是设置一个布尔值
 73 |         this.tabbar.toggleBar(true)
 74 |         this.tabbar.toggleBar(false)
 75 |     ```
 76 |     
 77 |     或者使用属性的方式：
 78 |     
 79 |     ```javascript
 80 |        <TabBar
 81 |               // ...
 82 |                toggleBar={this.state.toggle}
 83 |        >
 84 | 
 85 |        // 使用redux的方式
 86 |        // toggle 
 87 |        componentWillReceiveProps (nextProps){
 88 |        		this.setState({
 89 |        			toggle: nextProps.toggle
 90 |        		})
 91 |        }
 92 |         
 93 |     ```
 94 | 
 95 | 2.  标准的指定路由跳转方式：
 96 |     ```javascript
 97 |         <TabBar
 98 |                // ...
 99 |                 ref={tabbar=> this.tabbar=tabbar}
100 |         >
101 |      
102 |         // 使用句柄的函数跳转
103 |         this.tabbar.jumpToIndex(index)
104 |      
105 |     ```
106 |     
107 |     或者通过设置属性的方式跳转：
108 |     
109 |     ```javascript
110 |        <TabBar
111 |               // ...
112 |                index={this.state.index}
113 |        >
114 |     
115 |        // jump 
116 |        componentWillReceiveProps (nextProps){
117 |             this.setState({
118 |                 index: nextProps.index
119 |             })
120 |        }
121 |         
122 |     ```
123 | 
124 | 3. 可扩展的样式：
125 | 
126 |     你可以为tabbar自定义任何样式：
127 |     ```javascript
128 |        <TabBar
129 |               // ...
130 |                style={{...}}
131 |        >
132 |            <TabBar.Item
133 |                // ...
134 |                style={{...}}
135 |             >
136 |                <Index />
137 |             </TabBar.Item>    
138 |        </TabBar>
139 |         
140 |     ```
141 | 
142 | 
143 | >### **使用例子**  
144 |  
145 |     参见 /example
146 | 
147 | >### **支持**      
148 | 
149 | - MAIL   `(# = @) => nanazuimeng123#gmail.com`
150 | - [ISSUES](https://github.com/WittBulter/react-native-smartbar/issues)
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by WittBulter on 16/9/7.
 3 |  */
 4 | 
 5 | import React, {Component} from 'react'
 6 | import {View, Text} from 'react-native'
 7 | 
 8 | export default class Index extends Component {
 9 | 	// 构造
10 | 	constructor (props){
11 | 		super(props)
12 | 		// 初始状态
13 | 		this.state = {}
14 | 	}
15 | 	render (){
16 | 		return (
17 | 			<View style={{flex: 1, justifyContent: 'center', alignSelf: 'center'}}>
18 | 				<Text style={{fontSize: 25}}>index page</Text>
19 | 			</View>
20 | 		)
21 | 	}
22 | }


--------------------------------------------------------------------------------
/example/list.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by WittBulter on 16/9/7.
 3 |  */
 4 | 
 5 | import React, {Component} from 'react'
 6 | import {View, Text} from 'react-native'
 7 | 
 8 | export default class List extends Component {
 9 | 	// 构造
10 | 	constructor (props){
11 | 		super(props)
12 | 		// 初始状态
13 | 		this.state = {}
14 | 	}
15 | 	render (){
16 | 		return (
17 | 			<View style={{flex: 1, justifyContent: 'center', alignSelf: 'center'}}>
18 | 				<Text style={{fontSize: 25}}>list page</Text>
19 | 			</View>
20 | 		)
21 | 	}
22 | }


--------------------------------------------------------------------------------
/example/me.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by WittBulter on 16/9/7.
 3 |  */
 4 | 
 5 | import React, {Component} from 'react'
 6 | import {View, Text} from 'react-native'
 7 | 
 8 | export default class Me extends Component {
 9 | 	// 构造
10 | 	constructor (props){
11 | 		super(props)
12 | 		// 初始状态
13 | 		this.state = {}
14 | 	}
15 | 	render (){
16 | 		return (
17 | 			<View style={{flex: 1, justifyContent: 'center', alignSelf: 'center'}}>
18 | 				<Text style={{fontSize: 25}}>me page</Text>
19 | 			</View>
20 | 		)
21 | 	}
22 | }


--------------------------------------------------------------------------------
/example/tabbar-example.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by WittBulter on 16/9/7.
 3 |  */
 4 | 
 5 | import React, {Component} from 'react'
 6 | import {View} from 'react-native'
 7 | 
 8 | import Index from './index'
 9 | import List from './list'
10 | import Me from './me'
11 | 
12 | import TabBar from '../component/tabbar'
13 | 
14 | export default class Tabbar extends Component {
15 | 	// 构造
16 | 	constructor(props) {
17 | 		super(props);
18 | 		// 初始状态
19 | 		this.state = {
20 | 			toggle: true,
21 | 			index: 2
22 | 		}
23 | 	}
24 | 
25 | 	render() {
26 | 		return (
27 | 			<TabBar
28 | 				activeColor={'#FE985B'}
29 | 				toggle={this.state.toggle}
30 | 				ref={tabbar => this.tabbar = tabbar}
31 | 				index={this.state.index}
32 | 			>
33 | 				<TabBar.Item
34 | 					icon={require('../../img/ios/dcc_home@2x.png')}
35 | 					selectedIcon={require('../../img/ios/dcc_home_on@2x.png')}
36 | 					text={'Index'}
37 | 				>
38 | 					<Index />
39 | 				</TabBar.Item>
40 | 
41 | 				<TabBar.Item
42 | 					icon={require('../../img/ios/dcc_home_list@2x.png')}
43 | 					selectedIcon={require('../../img/ios/dcc_home_list_on@2x.png')}
44 | 					text={'List'}
45 | 				>
46 | 					<List />
47 | 				</TabBar.Item>
48 | 
49 | 				<TabBar.Item
50 | 					icon={require('../../img/ios/dcc_home_my@2x.png')}
51 | 					selectedIcon={require('../../img/ios/dcc_home_my_on@2x.png')}
52 | 					text={'Me'}
53 | 				>
54 | 					<Me />
55 | 				</TabBar.Item>
56 | 			</TabBar>
57 | 		)
58 | 	}
59 | 
60 | 
61 | }
62 | 
63 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Created by WittBulter on 16/9/5.
  3 |  */
  4 | 
  5 | import React, { Component } from 'react'
  6 | import { Animated, Dimensions, Easing, Image, Platform, StyleSheet, Text, TouchableHighlight, View } from 'react-native'
  7 | import Item from './item'
  8 | 
  9 | export default class Tabbar extends Component {
 10 |   
 11 |   static propTypes = {
 12 |     ...View.propTypes,
 13 |     style: View.propTypes.style,
 14 |     activeColor: React.PropTypes.string,
 15 |     height: React.PropTypes.number,
 16 |   }
 17 |   static Item = Item
 18 |   
 19 |   constructor(props) {
 20 |     super(props)
 21 |     this.state = {
 22 |       content: this.props.children,
 23 |       contentActive: this.props.index || 0,
 24 |       contentHeight: this.props.height || 45,
 25 |       textActive: this.props.activeColor ? this.props.activeColor : '#fe985b',
 26 |       footerMarginBottom: new Animated.Value(0),
 27 |     }
 28 |   }
 29 |   
 30 |   /**
 31 |    *
 32 |    * @param children {Array} children pages footer
 33 |    */
 34 |   footerBar(children) {
 35 |     /**
 36 |      *
 37 |      * @param done {function} item callback
 38 |      * @param index {number} onpress index
 39 |      */
 40 |     const pressHandle = (done, index) => {
 41 |       this.setState({ contentActive: index })
 42 |       done && done()
 43 |     }
 44 |     const textBox = () => {}
 45 |     
 46 |     return children.map((item, index) => {
 47 |       const active = this.state.contentActive === index
 48 |       const selected = item.props.selectedIcon || item.props.icon
 49 |       const box = (text, icon) => {
 50 |         if (!text) {
 51 |           return (
 52 |             <View style={styles.box}>
 53 |               <Image source={active ? selected : item.props.icon}
 54 |                 style={styles.onlyIcon}
 55 |                 {...item.props.iconStyle}/>
 56 |             </View>
 57 |           )
 58 |         }
 59 |         if (!icon) {
 60 |           return (
 61 |             <View style={styles.box}>
 62 |               <Text style={[styles.onlyText, active && { color: this.state.textActive }, { ...item.props.textStyle }]}>
 63 |                 {text}
 64 |               </Text>
 65 |             </View>
 66 |           )
 67 |         }
 68 |         return (
 69 |           <View style={styles.box}>
 70 |             <Image source={icon} style={styles.icon} {...item.props.iconStyle}/>
 71 |             <Text style={[styles.text, active && { color: this.state.textActive }, { ...item.props.textStyle }]}>
 72 |               {text}
 73 |             </Text>
 74 |           </View>
 75 |         )
 76 |       }
 77 |       return (
 78 |         <TouchableHighlight key={`tabbar-item${index}`} style={styles.footerButton}
 79 |           onPress={() => pressHandle(item.props.onPress, index)}
 80 |           underlayColor={'transparent'}>
 81 |           {box(item.props.text, active ? selected : item.props.icon)}
 82 |         </TouchableHighlight>
 83 |       )
 84 |     })
 85 |   }
 86 |   
 87 |   render() {
 88 |     return (
 89 |       <View style={styles.body}>
 90 |         <View style={styles.content}>
 91 |           {this.state.content[this.state.contentActive].props.children}
 92 |         </View>
 93 |         <Animated.View
 94 |           style={[styles.footer, { marginBottom: this.state.footerMarginBottom }, { height: this.state.contentHeight }]}
 95 |           {...this.props.style}>
 96 |           {this.footerBar(this.props.children)}
 97 |         </Animated.View>
 98 |       </View>
 99 |     )
100 |   }
101 |   
102 |   /**
103 |    *
104 |    * @param t [{bool}] footBar show&hide
105 |    */
106 |   toggleBar(t = (this.state.footerMarginBottom._value === 0 )) {
107 |     Animated.timing(
108 |       this.state.footerMarginBottom, {
109 |         toValue: t ? -85 : 0,
110 |         duration: 190,
111 |         easing: Easing.linear,
112 |       },
113 |     ).start()
114 |   }
115 |   
116 |   /**
117 |    *
118 |    * @param index [{number}] screen index
119 |    */
120 |   jumpToIndex(index) {
121 |     this.setState({ contentActive: index })
122 |   }
123 |   
124 |   
125 |   componentWillReceiveProps(nextProps) {
126 |     nextProps.index !== undefined && this.jumpToIndex(nextProps.index)
127 |     nextProps.toggleBar !== undefined && this.toggleBar(!nextProps.toggleBar)
128 |   }
129 |   
130 | }
131 | const { width, height } = Dimensions.get('window')
132 | const styles = StyleSheet.create({
133 |   body: {
134 |     flexGrow: 1,
135 |     width: width,
136 |     overflow: 'hidden',
137 |     height: height,
138 |     flexDirection: 'column',
139 |   },
140 |   content: {
141 |     flex: 1,
142 |   },
143 |   box: {
144 |     flex: 1,
145 |     alignItems: 'center',
146 |     justifyContent: 'center',
147 |   },
148 |   footer: {
149 |     width: width,
150 |     flexDirection: 'row',
151 |     backgroundColor: '#fff',
152 |     borderTopWidth: 1,
153 |     borderTopColor: '#e5e5e5',
154 |   },
155 |   footerButton: {
156 |     flex: 1,
157 |     alignItems: 'center',
158 |     justifyContent: 'center',
159 |     paddingTop: 5,
160 |     paddingBottom: 5,
161 |   },
162 |   icon: {
163 |     width: Platform.OS === 'ios' ? 22 : 18,
164 |     height: Platform.OS === 'ios' ? 22 : 18,
165 |     alignItems: 'center',
166 |   },
167 |   onlyIcon: {
168 |     width: 27,
169 |     height: 27,
170 |     alignItems: 'center',
171 |     marginTop: 5,
172 |     marginBottom: 5,
173 |   },
174 |   text: {
175 |     fontSize: 12,
176 |     color: '#9b9db0',
177 |     paddingTop: 3,
178 |     textAlign: 'center',
179 |   },
180 |   onlyText: {
181 |     fontSize: 16,
182 |     color: '#9b9db0',
183 |     alignItems: 'center',
184 |     justifyContent: 'center',
185 |     marginTop: 8,
186 |     marginBottom: 8,
187 |   },
188 | })
189 | 


--------------------------------------------------------------------------------
/item.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Created by WittBulter on 16/9/5.
 3 |  */
 4 | 
 5 | import React, { Component } from 'react'
 6 | import { StyleSheet, Text, View } from 'react-native'
 7 | 
 8 | export default class TabbarItem extends Component {
 9 |   
10 |   constructor(props) {
11 |     super(props)
12 |     this.state = {}
13 |   }
14 |   
15 |   render() {
16 |     return (<View>{this.props.children}</View>)
17 |   }
18 | }
19 | 
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-native-smartbar",
 3 |   "version": "0.1.5",
 4 |   "description": "tabbar react-native android ios ",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://WittBulter@github.com/WittBulter/react-native-smartbar.git"
12 |   },
13 |   "keywords": [
14 |     "tabbar",
15 |     "react-native",
16 |     "android",
17 |     "ios"
18 |   ],
19 |   "author": "WittBulter",
20 |   "license": "ISC",
21 |   "bugs": {
22 |     "url": "https://github.com/WittBulter/react-native-smartbar/issues"
23 |   },
24 |   "homepage": "https://github.com/WittBulter/react-native-smartbar#readme"
25 | }
26 | 


--------------------------------------------------------------------------------