我正在尝试设计一个React Native 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 ？