finished first version

.gitignore

@@ -0,0 +1,12 @@
+*.[aod]
+*.DS_Store
+.DS_Store
+*Thumbs.db
+*.iml
+.gradle
+.idea
+node_modules
+npm-debug.log
+/android/build
+/ios/**/*xcuserdata*
+/ios/**/*xcshareddata*

.npmignore

@@ -0,0 +1,12 @@
+*.[aod]
+*.DS_Store
+.DS_Store
+*Thumbs.db
+*.iml
+.gradle
+.idea
+node_modules
+npm-debug.log
+/android/build
+/ios/**/*xcuserdata*
+/ios/**/*xcshareddata*

Badge.js

@@ -0,0 +1,100 @@
+/*
+ * A smart badge for react-native apps
+ * https://github.com/react-native-component/react-native-smart-badge/
+ * Released under the MIT license
+ * Copyright (c) 2016 react-native-component <[email protected]>
+ */
+
+import React, {
+  Component,
+  PropTypes,
+} from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+} from 'react-native'
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'red',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  text: {
+    paddingVertical: 2,
+    paddingHorizontal: 4,
+    color: '#fff',
+    backgroundColor: 'transparent',
+    fontSize: 14,
+  },
+})
+
+export default class Badge extends Component {
+
+  static defaultProps = {
+    extraPaddingHorizontal: 10,
+  }
+
+  static PropTypes = {
+      //borderRadius: PropTypes.number,   //number 18, null 5
+      extraPaddingHorizontal: PropTypes.number,
+      style: View.propTypes.style,
+      textStyle: Text.propTypes.style,
+  }
+
+  // 构造
+    constructor(props) {
+      super(props)
+      // 初始状态
+      this.state = {}
+
+      this._width = 0
+    }
+
+  render() {
+    return (
+      <View ref={ component => this._container = component } style={[styles.container, this.props.style]}>
+          {this._renderChildren()}
+      </View>
+    )
+  }
+
+  _renderChildren() {
+      return React.Children.map(this.props.children, (child) => {
+          if(!React.isValidElement(child)) {
+              return (
+                 <Text onLayout={this._onLayout} style={[styles.text, this.props.textStyle]}>{child}</Text>
+              )
+          }
+          else {
+            return child
+          }
+      })
+  }
+
+  _onLayout = (e) => {
+    console.log('_onLayout')
+    let width
+
+    if(e.nativeEvent.layout.width <= e.nativeEvent.layout.height) {
+      width = e.nativeEvent.layout.height
+    }
+    else {
+      width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal
+    }
+    if(this._width == width) {
+      return
+    }
+    this._width = width
+    this._container.setNativeProps({
+      style: {
+        width: width,
+        height: e.nativeEvent.layout.height,
+        borderRadius: e.nativeEvent.layout.height / 2,
+      },
+    });
+  }
+
+}

README.md

@@ -1 +1,85 @@
-# react-native-smart-badge
+# react-native-smart-badge
+A smart autofit badge for react-native apps, written in JS for cross-platform support.
+It works on iOS and Android.
+
+This component is compatible with React Native 0.25 and newer.
+
+## Preview
+
+![react-native-smart-badge-preview][1]
+
+## Installation
+
+```
+npm install react-native-smart-badge --save
+```
+
+or
+
+```
+npm install @react-native-component/react-native-smart-badge --save
+```
+
+
+
+## Usage
+
+Install the button from npm with `npm install @react-native-component/react-native-smart-badge --save`.
+Then, require it from your app's JavaScript files with `import Button from '@react-native-component/react-native-smart-badge'`.
+
+```js
+import Badge from '../../react-native-smart-badge'
+
+export default class NumberBadge extends Component {
+
+  // 构造
+    constructor(props) {
+      super(props);
+      // 初始状态
+      this.state = {
+         num1: 2,
+         num2: 15,
+         num3: 328,
+      };
+    }
+
+  render() {
+    return (
+      <View style={{marginTop: 20 + 44, flex: 1, justifyContent: 'center', alignItems: 'center', }}>
+        <Badge>
+          {this.state.num1}
+        </Badge>
+        <Badge style={{marginTop: 10,}}>
+          {this.state.num2}
+        </Badge>
+        <Badge style={{marginTop: 10,}}>
+          {this.state.num3}
+        </Badge>
+
+        <Text style={{marginTop: 10, padding: 3,}} onPress={this._addNum}>click to add num(点击增加数字)</Text>
+      </View>
+    )
+  }
+
+  _addNum = () => {
+    this.setState({
+      num1: this.state.num1 + 3,
+      num2: this.state.num2 + 30,
+      num3: this.state.num3 + 300,
+    })
+  }
+
+}
+```
+
+## Props
+
+Prop                   | Type   | Optional | Default   | Description
+---------------------- | ------ | -------- | --------- | -----------
+extraPaddingHorizontal | number | Yes      | 10        | determines the value of extra horizontal padding when the badge's width is larger than height.
+style                  | style  | Yes      |           | see [react-native documents][2]
+textStyle              | style  | Yes      |           | see [react-native documents][3]
+
+[1]: http://cyqresig.github.io/img/react-native-smart-badge-preview-v1.0.0.gif
+[2]: https://facebook.github.io/react-native/docs/style.html
+[3]: https://facebook.github.io/react-native/docs/text.html#style

note.md

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

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "react-native-smart-badge",
+  "version": "1.0.0",
+  "description": "A smart auto-fit badge for React Native apps",
+  "main": "Badge.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/react-native-component/react-native-smart-badge.git"
+  },
+  "keywords": [
+    "react-native",
+    "smart",
+    "badge",
+    "component"
+  ],
+  "author": "HISAME SHIZUMARU",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/react-native-component/react-native-smart-badge/issues"
+  },
+  "homepage": "https://github.com/react-native-component/react-native-smart-badge#readme"
+}