Circle.js

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import PropTypes from "prop-types";
const styles = StyleSheet.create({
  container: {
    position: "absolute"
  }
});

export default class Circle extends Component {
  static defaultProps = {
    isFill: false,
    backgroundColor: "transparent"
  };

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

  render() {
    return (
      <View
        accessibilityLabel={this.props.accessibilityLabel}
        style={[
          styles.container,
          this.props.isFill
            ? { backgroundColor: this.props.color }
            : {
                borderColor: this.props.color,
                borderWidth: this.props.borderWidth,
                backgroundColor: this.props.backgroundColor
              },
          {
            width: this._diameter,
            height: this._diameter,
            borderRadius: this.props.radius,
            left: this.props.position.left,
            top: this.props.position.top
          }
        ]}
      >
        {this.props.children}
      </View>
    );
  }
}

Circle.propTypes = {
  isFill: PropTypes.bool,
  color: PropTypes.string.isRequired,
  radius: PropTypes.number.isRequired,
  borderWidth: PropTypes.number.isRequired,
  backgroundColor: PropTypes.string,
  position: PropTypes.shape({
    left: PropTypes.number.isRequired,
    top: PropTypes.number.isRequired
  }).isRequired
};