├── note.md ├── .gitignore ├── .npmignore ├── package.json ├── LICENSE ├── CornerLabel.js └── README.md /note.md: -------------------------------------------------------------------------------- 1 | * 要注意react-native的transform中没有提供类似web css3中的transform-origin(设置偏移的基准点)属性, 2 | react-native中所有的偏移都是以元素的中心点为基准进行的, 无法更改 3 | * 故这里为了达到最终效果, 采取了自行计算偏移的位置, 以达到更改偏移基准点的效果 -------------------------------------------------------------------------------- /.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* -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-smart-corner-label", 3 | "version": "1.1.2", 4 | "description": "A smart corner label for React Native app", 5 | "main": "CornerLabel.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-corner-label.git" 12 | }, 13 | "keywords": [ 14 | "react-native", 15 | "smart", 16 | "corner", 17 | "label", 18 | "corner label", 19 | "component" 20 | ], 21 | "author": "HISAME SHIZUMARU", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/react-native-component/react-native-smart-corner-label/issues" 25 | }, 26 | "homepage": "https://github.com/react-native-component/react-native-smart-corner-label#readme" 27 | } 28 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /CornerLabel.js: -------------------------------------------------------------------------------- 1 | /* 2 | * A smart corner-label for react-native apps 3 | * https://github.com/react-native-component/react-native-smart-sudoku-grid/ 4 | * Released under the MIT license 5 | * Copyright (c) 2016 react-native-component 6 | */ 7 | 8 | import React, { 9 | PropTypes, 10 | Component, 11 | } from 'react' 12 | import { 13 | StyleSheet, 14 | View, 15 | Text, 16 | } from 'react-native' 17 | 18 | const styles = StyleSheet.create({ 19 | container: { 20 | position: 'absolute', 21 | //transform: [{rotate: '45deg'}], 22 | justifyContent: 'flex-end', 23 | }, 24 | label: { 25 | justifyContent: 'center', 26 | alignItems: 'center', 27 | }, 28 | text: { 29 | color: '#fff', 30 | // fontFamily: '.HelveticaNeueInterface-MediumP4', 31 | fontSize: 12, 32 | }, 33 | }) 34 | 35 | export default class CornerLabel extends Component { 36 | 37 | static defaultProps = { 38 | alignment: 'left', 39 | } 40 | 41 | static propTypes = { 42 | style: View.propTypes.style, 43 | textStyle: Text.propTypes.style, 44 | cornerRadius: PropTypes.number.isRequired, 45 | alignment: PropTypes.oneOf([ 46 | 'left', 47 | 'right', 48 | ]) 49 | } 50 | 51 | // 构造 52 | constructor (props) { 53 | super(props) 54 | // 初始状态 55 | this.state = {} 56 | 57 | this._labelHeight = Math.sqrt(Math.pow(props.cornerRadius, 2) / 2) 58 | this._labelWidth = this._labelHeight * 2 59 | let originOffset = Math.sqrt(Math.pow(this._labelHeight / 2, 2) / 2) 60 | let labelHorizontalPosition = -this._labelWidth / 2 + originOffset 61 | let labelVerticalPosition = - this._labelHeight / 2 + originOffset 62 | if(props.alignment == 'left') { 63 | this._labelPosition = {left : labelHorizontalPosition, top: labelVerticalPosition} 64 | this._labelTransform = {transform: [{rotate: '-45deg'}]} 65 | } 66 | else { 67 | this._labelPosition = {right : labelHorizontalPosition, top: labelVerticalPosition} 68 | this._labelTransform = {transform: [{rotate: '45deg'}]} 69 | } 70 | 71 | } 72 | 73 | render () { 74 | return ( 75 | 80 | 84 | {this._renderChildren()} 85 | 86 | 87 | ) 88 | } 89 | 90 | _renderChildren () { 91 | return React.Children.map(this.props.children, (child) => { 92 | if (!React.isValidElement(child)) { 93 | return {child} 94 | } 95 | return child 96 | }) 97 | } 98 | 99 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-native-smart-corner-label 2 | 3 | [![npm](https://img.shields.io/npm/v/react-native-smart-corner-label.svg)](https://www.npmjs.com/package/react-native-smart-corner-label) 4 | [![npm](https://img.shields.io/npm/dm/react-native-smart-corner-label.svg)](https://www.npmjs.com/package/react-native-smart-corner-label) 5 | [![npm](https://img.shields.io/npm/dt/react-native-smart-corner-label.svg)](https://www.npmjs.com/package/react-native-smart-corner-label) 6 | [![npm](https://img.shields.io/npm/l/react-native-smart-corner-label.svg)](https://github.com/react-native-component/react-native-smart-corner-label/blob/master/LICENSE) 7 | 8 | A smart corner label for React Native app, 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-corner-label-preview-ios][1] 16 | ![react-native-smart-corner-label-preview-android][4] 17 | 18 | ## Installation 19 | 20 | ``` 21 | npm install react-native-smart-corner-label --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-corner-label --save`. 31 | Then, require it from your app's JavaScript files with `import CornerLabel from 'react-native-smart-corner-label'`. 32 | 33 | ```js 34 | import React, { 35 | Component, 36 | } from 'react' 37 | import { 38 | StyleSheet, 39 | View, 40 | Image, 41 | Text, 42 | } from 'react-native' 43 | 44 | import CornerLabel from 'react-native-smart-corner-label' 45 | 46 | import image_shopping from '../images/shopping.png' 47 | 48 | export default class CornerLabelDemo extends Component { 49 | 50 | render() { 51 | return ( 52 | 53 | 56 | 57 | shopping 58 | 62 | New 63 | 64 | 65 | 68 | 69 | 购物 70 | 75 | 新 76 | 77 | 78 | 81 | 82 | shopping 83 | 87 | 30% off 88 | 89 | 90 | 93 | 94 | 购物 95 | 100 | 7折优惠 101 | 102 | 103 | 104 | ) 105 | } 106 | 107 | } 108 | ``` 109 | 110 | ## Props 111 | 112 | Prop | Type | Optional | Default | Description 113 | ---------------------- | ------ | -------- | --------- | ----------- 114 | alignment | string | Yes | 'left' | determines the position of the corner label(keep left or right). 115 | cornerRadius | number | No | | determines the value of the corner's radius. 116 | style | style | Yes | | see [react-native documents][2] 117 | textStyle | style | Yes | | see [react-native documents][3] 118 | 119 | [0]: https://github.com/cyqresig/ReactNativeComponentDemos 120 | [1]: http://cyqresig.github.io/img/react-native-smart-corner-label-preview-ios-v1.1.0.gif 121 | [2]: https://facebook.github.io/react-native/docs/style.html 122 | [3]: https://facebook.github.io/react-native/docs/text.html#style 123 | [4]: http://cyqresig.github.io/img/react-native-smart-corner-label-preview-android-v1.1.0.gif 124 | --------------------------------------------------------------------------------