Arrow.js

import React, {
  Component,
} from 'react';
import {
  StyleSheet,
  View,
} from 'react-native';

import PropTypes from 'prop-types';

import * as Utils from './Utils';

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
  }
});

export default class Arrow extends Component {

  static defaultProps = {
    vertexDeg: 90,
  };

  static propTypes = {
    vertexDeg: PropTypes.number,
    start: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }).isRequired,
    end: PropTypes.shape({
      x: PropTypes.number.isRequired,
      y: PropTypes.number.isRequired,
    }).isRequired,
    width: PropTypes.number.isRequired,
    color: PropTypes.string.isRequired,
  };

  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {};
    this._borderWidth = props.width / 3 * 2;
    this._transform = Utils.getArrowTransform(props.start, props.end, props.width, this._borderWidth, props.vertexDeg);
  }

  render() {
    return (
      <View
        style={[styles.container, {
          borderWidth: this._borderWidth,
          borderLeftColor: this.props.color,
          borderRightColor: 'transparent',
          borderTopColor: 'transparent',
          borderBottomColor: 'transparent',
          left: this._transform.origin.x,
          top: this._transform.origin.y,
          transform: [{translateX: this._transform.translateX},
            {translateY: this._transform.translateY},
            {rotateZ: this._transform.rotateRad + 'rad'}]
        }]}/>
    );

  }

}