react-native-smart-corner-label/CornerLabel.js at c292f98af7131d4f0c0adfe0477de6d46c784d15 · react-native-component/react-native-smart-corner-label · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/*
 * A smart corner-label for react-native apps
 * https://github.com/react-native-component/react-native-smart-sudoku-grid/
 * Released under the MIT license
 * Copyright (c) 2016 react-native-component <moonsunfall@aliyun.com>
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { StyleSheet, View, Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    // transform: [{rotate: '45deg'}],
    justifyContent: 'flex-end',
  },
  label: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    color: '#fff',
    // fontFamily: '.HelveticaNeueInterface-MediumP4',
    fontSize: 12,
  },
});

export default class CornerLabel extends Component {
  static defaultProps = {
    alignment: 'left',
  };

  static propTypes = {
    style: PropTypes.object,
    textStyle: PropTypes.object,
    cornerRadius: PropTypes.number.isRequired,
    alignment: PropTypes.oneOf(['left', 'right']),
  };

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {};

    this._labelHeight = Math.sqrt(Math.pow(props.cornerRadius, 2) / 2);
    this._labelWidth = this._labelHeight * 2;
    const originOffset = Math.sqrt(Math.pow(this._labelHeight / 2, 2) / 2);
    const labelHorizontalPosition = -this._labelWidth / 2 + originOffset;
    const labelVerticalPosition = -this._labelHeight / 2 + originOffset;
    if (props.alignment == 'left') {
      this._labelPosition = {
        left: labelHorizontalPosition,
        top: labelVerticalPosition,
      };
      this._labelTransform = { transform: [{ rotate: '-45deg' }] };
    } else {
      this._labelPosition = {
        right: labelHorizontalPosition,
        top: labelVerticalPosition,
      };
      this._labelTransform = { transform: [{ rotate: '45deg' }] };
    }
  }

  render() {
    return (
      <View
        style={[
          styles.container,
          this._labelPosition,
          this._labelTransform,
          { width: this._labelWidth, height: this._labelHeight },
        ]}
      >
        <View
          style={[
            styles.label,
            { height: this._labelHeight },
            this.props.style,
          ]}
        >
          {this._renderChildren()}
        </View>
      </View>
    );
  }

  _renderChildren() {
    return React.Children.map(this.props.children, (child) => {
      if (!React.isValidElement(child)) {
        return <Text style={[styles.text, this.props.textStyle]}>{child}</Text>;
      }
      return child;
    });
  }
}