├── .gitignore
├── .npmignore
├── Badge.js
├── LICENSE
├── README.md
├── note.md
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
 1 | *.[aod]
 2 | *.DS_Store
 3 | .DS_Store
 4 | *Thumbs.db
 5 | *.iml
 6 | .gradle
 7 | .idea
 8 | node_modules
 9 | npm-debug.log
10 | /android/build
11 | /ios/**/*xcuserdata*
12 | /ios/**/*xcshareddata*


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | *.[aod]
 2 | *.DS_Store
 3 | .DS_Store
 4 | *Thumbs.db
 5 | *.iml
 6 | .gradle
 7 | .idea
 8 | node_modules
 9 | npm-debug.log
10 | /android/build
11 | /ios/**/*xcuserdata*
12 | /ios/**/*xcshareddata*


--------------------------------------------------------------------------------
/Badge.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * A smart badge for react-native apps
  3 |  * https://github.com/react-native-component/react-native-smart-badge/
  4 |  * Released under the MIT license
  5 |  * Copyright (c) 2016 react-native-component <moonsunfall@aliyun.com>
  6 |  */
  7 | 
  8 | import React, {
  9 |     Component,
 10 |     PropTypes,
 11 | } from 'react'
 12 | import {
 13 |     View,
 14 |     Text,
 15 |     StyleSheet,
 16 | } from 'react-native'
 17 | 
 18 | const styles = StyleSheet.create({
 19 |     container: {
 20 |         backgroundColor: 'red',
 21 |         justifyContent: 'center',
 22 |         alignItems: 'center',
 23 |         flexDirection: 'row',
 24 |     },
 25 |     text: {
 26 |         paddingVertical: 2,
 27 |         paddingHorizontal: 4,
 28 |         color: '#fff',
 29 |         fontFamily: '.HelveticaNeueInterface-MediumP4',
 30 |         backgroundColor: 'transparent',
 31 |         fontSize: 14,
 32 |         textAlign: 'center',         //for android
 33 |         textAlignVertical: 'center', //for android
 34 |     },
 35 | })
 36 | 
 37 | export default class Badge extends Component {
 38 | 
 39 |     static defaultProps = {
 40 |         extraPaddingHorizontal: 10,
 41 |         minHeight: 0,
 42 |         minWidth: 0,
 43 |     }
 44 | 
 45 |     static propTypes = {
 46 |         //borderRadius: PropTypes.number,   //number 18, null 5
 47 |         extraPaddingHorizontal: PropTypes.number,
 48 |         style: View.propTypes.style,
 49 |         textStyle: Text.propTypes.style,
 50 |         minHeight: PropTypes.number,
 51 |         minWidth: PropTypes.number,
 52 |     }
 53 | 
 54 |     // 构造
 55 |     constructor (props) {
 56 |         super(props)
 57 |         // 初始状态
 58 |         this.state = {}
 59 | 
 60 |         this._width = 0
 61 |     }
 62 | 
 63 |     render () {
 64 |         return (
 65 |             <View ref={ component => this._container = component } style={[styles.container, this.props.style]}>
 66 |                 {this._renderChildren()}
 67 |             </View>
 68 |         )
 69 |     }
 70 | 
 71 |     _renderChildren () {
 72 |         return React.Children.map(this.props.children, (child) => {
 73 |             if (!React.isValidElement(child)) {
 74 |                 return (
 75 |                     <Text onLayout={this._onLayout} style={[styles.text, this.props.textStyle]}>{child}</Text>
 76 |                 )
 77 |             }
 78 |             return child
 79 |         })
 80 |     }
 81 | 
 82 |     _onLayout = (e) => {
 83 |         let width
 84 | 
 85 |         if (e.nativeEvent.layout.width <= e.nativeEvent.layout.height) {
 86 |             width = e.nativeEvent.layout.height
 87 |         }
 88 |         else {
 89 |             width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal
 90 |         }
 91 |         width = Math.max(width, this.props.minWidth)
 92 |         if (this._width == width) {
 93 |             return
 94 |         }
 95 |         this._width = width
 96 |         let height = Math.max(e.nativeEvent.layout.height, this.props.minHeight)
 97 |         let borderRadius = height / 2
 98 |         this._container.setNativeProps({
 99 |             style: {
100 |                 width,
101 |                 height,
102 |                 borderRadius,
103 |             },
104 |         });
105 |     }
106 | 
107 | }


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-native-smart-badge
  2 | 
  3 | [![npm](https://img.shields.io/npm/v/react-native-smart-badge.svg)](https://www.npmjs.com/package/react-native-smart-badge)
  4 | [![npm](https://img.shields.io/npm/dm/react-native-smart-badge.svg)](https://www.npmjs.com/package/react-native-smart-badge)
  5 | [![npm](https://img.shields.io/npm/dt/react-native-smart-badge.svg)](https://www.npmjs.com/package/react-native-smart-badge)
  6 | [![npm](https://img.shields.io/npm/l/react-native-smart-badge.svg)](https://github.com/react-native-component/react-native-smart-badge/blob/master/LICENSE)
  7 | 
  8 | A smart autofit badge for react-native apps, written in JS for cross-platform support.
  9 | It works on iOS and Android.
 10 | 
 11 | This component is compatible with React Native 0.25 and newer.
 12 | 
 13 | ## Preview
 14 | 
 15 | ![react-native-smart-badge-preview-ios][1]
 16 | ![react-native-smart-badge-preview-android][4]
 17 | 
 18 | ## Installation
 19 | 
 20 | ```
 21 | npm install react-native-smart-badge --save
 22 | ```
 23 | 
 24 | ## Full Demo
 25 | 
 26 | see [ReactNativeComponentDemos][0]
 27 | 
 28 | ## Usage
 29 | 
 30 | Install the package from npm with `npm install react-native-smart-badge --save`.
 31 | Then, require it from your app's JavaScript files with `import Badge from 'react-native-smart-badge'`.
 32 | 
 33 | ```js
 34 | import React, {
 35 |   Component,
 36 | } from 'react'
 37 | import {
 38 |   StyleSheet,
 39 |   View,
 40 |   Text,
 41 | } from 'react-native'
 42 | 
 43 | import Badge from 'react-native-smart-badge'
 44 | import Button from 'react-native-smart-button'
 45 | 
 46 | export default class NumberBadge extends Component {
 47 | 
 48 |     // 构造
 49 |     constructor (props) {
 50 |         super(props);
 51 |         // 初始状态
 52 |         this.state = {
 53 |             num1: 2,
 54 |             num2: 15,
 55 |             num3: 328,
 56 |         };
 57 |     }
 58 | 
 59 |     render () {
 60 |         return (
 61 |             <View style={{marginTop: 20 + 44, flex: 1, justifyContent: 'center', alignItems: 'center', }}>
 62 |                 <Badge minWidth={18} minHeight={18} textStyle={{color: '#fff',}}>
 63 |                     {this.state.num1}
 64 |                 </Badge>
 65 |                 <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
 66 |                     {this.state.num2}
 67 |                 </Badge>
 68 |                 <Badge textStyle={{color: '#fff',}} style={{marginTop: 10,}}>
 69 |                     {this.state.num3}
 70 |                 </Badge>
 71 | 
 72 |                 <Button
 73 |                     touchableType={'blur'}
 74 |                     style={{marginTop: 10, width: 300, justifyContent: 'center', height: 40, backgroundColor: '#00AAEF', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: '#00AAEF', justifyContent: 'center',}}
 75 |                     textStyle={{fontSize: 17,  color: 'white'}}
 76 |                     onPress={this._addNum}>
 77 |                     click to plus num(点击增加数字)
 78 |                 </Button>
 79 |             </View>
 80 |         )
 81 |     }
 82 | 
 83 |     _addNum = () => {
 84 |         this.setState({
 85 |             num1: this.state.num1 + 3,
 86 |             num2: this.state.num2 + 30,
 87 |             num3: this.state.num3 + 300,
 88 |         })
 89 |     }
 90 | 
 91 | }
 92 | ```
 93 | 
 94 | ## Props
 95 | 
 96 | Prop                   | Type   | Optional | Default   | Description
 97 | ---------------------- | ------ | -------- | --------- | -----------
 98 | extraPaddingHorizontal | number | Yes      | 10        | determines the value of extra horizontal padding when the badge's width is larger than height.
 99 | style                  | style  | Yes      |           | see [react-native documents][2]
100 | textStyle              | style  | Yes      |           | see [react-native documents][3]
101 | minHeight              | number | Yes      |           | determines the min-height of badge
102 | minWidth               | number | Yes      |           | determines the min-width of badge
103 | 
104 | [0]: https://github.com/cyqresig/ReactNativeComponentDemos
105 | [1]: http://cyqresig.github.io/img/react-native-smart-badge-preview-ios-v1.0.7.gif
106 | [2]: https://facebook.github.io/react-native/docs/style.html
107 | [3]: https://facebook.github.io/react-native/docs/text.html#style
108 | [4]: http://cyqresig.github.io/img/react-native-smart-badge-preview-android-v1.0.7.gif
109 | 


--------------------------------------------------------------------------------
/note.md:
--------------------------------------------------------------------------------
 1 | 
 2 | 注意事项:
 3 | * 要注意要得到badge的圆角边框半径值, 需要获取badge的实际高度, 则须badge内容完全加载后(onLayout)才能精确获取到
 4 | * 要注意text元素会继承父元素的background相关的样式属性(不同于h5...),
 5 | 故在text元素的父元素上设置圆角时, 需要将text元素继承的backgroundColor设置为透明
 6 | * 要注意改变元素的layout(定位位置x与y, 宽度, 高度)后该元素的onLayout事件会再次触发
 7 | * 要注意当数字位数长(比如2位数)时, 宽度大于高度, 此时宽度需要取自己的值, 左右二边需要预留额外的空间,
 8 | 当数字位数只有1位时, 宽度小于高度, 此时宽度需要取高度的值, 并且不应在二边加上额外的预留空间
 9 | * 要注意要让元素的某个尺寸自适应内容长度(比如宽度), 需要先保证这个元素没有继承父元素的宽度
10 | (父元素设置flexDirection: 'column'及设置alignItems: 'stretch', 父元素设置flexDirection: 'row'并且元素设置flex: 1)
11 | * 要注意android的Text元素默认不会水平与垂直居中, 需要手动设置居中(ios则无需设置)
12 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@react-native-component/react-native-smart-badge",
 3 |   "version": "1.1.1",
 4 |   "description": "A smart auto-fit badge for React Native apps",
 5 |   "main": "Badge.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/react-native-component/react-native-smart-badge.git"
12 |   },
13 |   "keywords": [
14 |     "react-native",
15 |     "smart",
16 |     "badge",
17 |     "component"
18 |   ],
19 |   "author": "HISAME SHIZUMARU",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/react-native-component/react-native-smart-badge/issues"
23 |   },
24 |   "homepage": "https://github.com/react-native-component/react-native-smart-badge#readme"
25 | }
26 | 


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