Circle.js

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

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

//const borderWidth = 1

export default class Circle extends Component {

    static defaultProps = {
        isFill: false,
        backgroundColor: 'transparent',
    }

    static 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,

    }

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

    render() {
        return (
            <View
                //onLayout={ (e) => {
                //   //console.log('this._diameter = ' + this._diameter)
                //   //console.log('e.nativeEvent')
                //   //console.log(e.nativeEvent)
                //}}
                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 - borderWidth,
                        //top: this.props.position.top - borderWidth,
                        left: this.props.position.left,
                        top: this.props.position.top,
                    }
                ]}>
                {this.props.children}
            </View>
        )
    }

}