React Native动态可调饼图

Question

我正在构建一个react native应用程序，用户应该能够在饼图上移动一个调整器来调整饼图的开始和结束角度。我正在使用3个panResponders，并在/ users / 681830 / val中使用了这个想法：

react native circle transform translate animation

我正在计算与36个快照中的任何一个之间的最短距离，然后将动画值设置为该点，但是它效率极低且比较滞后。谁能建议任何性能更好的解决方案？

'''

this._panResponder1 = PanResponder.create(
  {
    onStartShouldSetPanResponder: (evt, gesture) =>true,
    onPanResponderMove: (evt, gesture) => {



      //we need the distance between the points and get the index of the minimum distance
      distances = [];
      for(var i = 0; i < 36; i++){
        var a = this.outputRangeX[i] - gesture.moveX;
        var b = this.outputRangeY[i] - gesture.moveY + 120;
        distances.push(Math.sqrt(a*a + b*b));
      }


      var minInd = distances.indexOf(Math.min(...distances));
      this.setState({indexOfAdj1 : minInd});
      this.adj1Anim.setValue((1/36)* minInd);





      var isPos1 = minInd/36;
      var isPos2 = (minInd)/36;
      if(minInd>24){
        isPos1 = -1 * ((36-minInd)/36);
        isPos2 = minInd/36;
        this.setState({data: [
          {
            number: 1,
            startAngle: isPos1* Math.PI * 2,
            endAngle: this.state.data[0].endAngle,
        },
        {
            number: 30,
            startAngle: this.state.data[1].startAngle,
            endAngle: this.state.data[1].endAngle,
        },
        {
            number: 1,
            startAngle: this.state.data[1].endAngle,
            endAngle: isPos2* Math.PI * 2,
        },
        ]});
      }else{
        this.setState({data: [
          {
            number: 1,
            startAngle: isPos1* Math.PI * 2,
            endAngle: this.state.data[0].endAngle,
        },
        {
            number: 30,
            startAngle: this.state.data[1].startAngle,
            endAngle: this.state.data[1].endAngle,
        },
        {
            number: 1,
            startAngle: -((Math.PI * 2)-this.state.data[1].endAngle),
            endAngle: isPos2* Math.PI * 2,
        },
        ]});
      }



    }

'''