使用React Native SVG将SVG排列半圈

Question

我正在尝试设计一个React Native UI，该UI的中心是一个图像，周围有一束以圆周运动排列的按钮。

我正在使用以下公式计算圆形按钮的位置

cx：     cx = {Math.cos（2 * Math.PI / numberOfPoints * i）* circleRadius}

cy：     cy = {Math.sin（2 * Math.PI / numberOfPoints * i）* circleRadius}

我的SVG渲染     const circleRadius = Dimensions.get（'window'）。width / 2;     const numberOfPoints = 8;

<Svg style={{flex: 1}}>
  <G>
    <Circle key={0} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 0) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 0) * circleRadius} fill="green"/>
    <Circle key={1} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 1) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 1) * circleRadius} fill="purple"/>
    <Circle key={2} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 2) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 2) * circleRadius} fill="black"/>
    <Circle key={3} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 3) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 3) * circleRadius} fill="green"/>
    <Circle key={4} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 4) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 4) * circleRadius} fill="purple"/>
    <Circle key={5} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 5) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 5) * circleRadius} fill="black"/>
    <Circle key={6} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 6) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 6) * circleRadius} fill="green"/>
    <Circle key={7} r="6" cx={Math.cos(2 * Math.PI / numberOfPoints * 7) * circleRadius} cy={Math.sin(2 * Math.PI / numberOfPoints * 7) * circleRadius} fill="purple"/>

在3个圆圈中产生的结果是圆圈的右下部分，而不是模型中的左上部分

我如何按照设计中的圆形方式绘制圆圈？是否有一种更简单/更好的方法来完成此操作而不使用react-native-svg？