React Native中具有旋转功能的圆形菜单

Question

我想要一个圆形菜单，如下图所示。我希望用户能够用手指旋转项目，如果他单击某个项目，则应该旋转到菜单顶部

我正在使用panresponder。我的代码是

_handlePanResponderMove = (e, gestureState) => {
    let theta = this.calculateAngle(gestureState);
   this._circleStyles.style.transform = [{rotate: `${-theta}deg`}];
    this._updateNativeStyles();
};

_handlePanResponderEnd = (e, gestureState) => {
    let theta = this.calculateAngle(gestureState);
    if (theta % 51.4285714 != 0) {
        if (theta > (parseInt(theta / 51.4285714) * 51.4285714 + 38.571429)) {
            theta = (parseInt(theta / 51.4285714) + 1) * 38.571429;

        }
        else if (theta < (parseInt(theta / 51.4285714) * 51.4285714 ) && theta > 0) {

            theta = parseInt(theta / 51.4285714) * 38.571429;
        }
        if (theta < (parseInt(theta / 51.4285714) * 51.4285714 - 38.571429)) {
            theta = (parseInt(theta / 51.4285714) - 1) * 38.571429;

        }
        else if (theta > (parseInt(theta / 51.4285714) * 51.4285714 - 38.571429) && theta < 0) {
            theta = parseInt(theta / 51.4285714) * 38.571429;

        }

        this._circleStyles.style.transform = [{rotate: `${-theta}deg`}];
        this._updateNativeStyles();
    }
    this._selectedItem = parseInt(theta / 51.4285714) % 7;
    if (this._selectedItem < 0) {
        this._selectedItem += 7;
    }
    this.text(this._selectedItem);
    this._rotation = theta;


};

calculateAngle(gestureState) {
    let u = {
        x: gestureState.x0 - width / 2,
        y: gestureState.y0 - height + 0.5* width + 15
    };
    let v = {
        x: gestureState.moveX - width / 2,
        y: gestureState.moveY - height + 0.5* width + 15
    };
    return (this._rotation + ((Math.atan2(u.y, u.x) - Math.atan2(v.y, v.x)) * 180 / Math.PI));
}
}

但是，它并没有完全位于列表的顶部，并且没有选择单击的项目。