Вращайте диски с прикосновением пользователя в React Native - PullRequest
Новая
       15

Вращайте диски с прикосновением пользователя в React Native

0 голосов
/ 25 июня 2018

Я хочу создать похожий на диск компонент в react-native, который пользователь может вращать касанием и выравнивать сегменты в соответствии с маркером.

Ниже приведено изображение компонента, который я намереваюсьmake:

enter image description here

В центре находятся 3 диска, и каждый диск должен вращаться индивидуально.На каждом диске есть несколько сегментов с некоторыми значениями.Как только сегменты выровнены, это может выглядеть следующим образом:

enter image description here

Я ищу способ вращения дисков с пользователем коснитесь , чтобы сегменты могли быть выровнены и отображать соответствующие значения.

Я пытался увидеть React Native Animated API, но не уверен, смогу ли я добиться этого с его помощью.

Кроме того, я не знаю, как продолжить работу с сенсорным вводом пользователя, чтобы вращать диски.

1 Ответ

0 голосов
/ 25 июня 2018

сначала вам нужно вычислить положение вашего элемента на диске. style creatore функция вычислит стиль и вернет его, если вы хотите добавить элемент на диск с вашим вращением, вам нужна структура Round Queue, если нет, и ваш элемент на диск всегда один и тот же, просто используйте простой массив 

  styleCreator = (Ncircle,radius) => {
    //this.Styles = new RoundQueue()
    this.Styles = []
    var step = 360 / (Ncircle);
    var degrees = [];
    for(let index = 0; index < Ncircle ; index ++ ){
      degrees.push(0 + index * step)
    }
    for(let index = 0; index < Ncircle ; index ++ ){
      let radTdeg = degrees[index] * Math.PI / 180
      let TX = radius * Math.cos(radTdeg)
      let TY = radius * Math.sin(radTdeg)
      let Rotate = degrees[index]
      //this.Styles.enqueue          
      this.Styles.push({
        position: 'absolute',
        transform: [
                    {translateX : TX},
                    {translateY : TY},
                  ]
      })
    }
  }

и для того, чтобы позволить вашему компоненту взять под контроль сенсорное использование Pan responder (см. Реакцию на нативный документ) 

handleStartShouldSetPanResponder = (e, gestureState) => {
    return true
  }
handlePanResponderGrant = (e, gestureState) => {
 this.setState({dragging: true})
}

вы можете управлять движением касания следующим образом: 

handlePanResponderMove = (e, gestureState) => {
  let Moved = Math.sqrt(Math.pow(gestureState.dx,2)+Math.pow(gestureState.dy,2))
  if(Math.sign(gestureState.dx) == -1 &&  Math.abs(gestureState.dx) > Math.abs(gestureState.dy) || Math.sign(gestureState.dy) == -1 &&  Math.abs(gestureState.dy) > Math.abs(gestureState.dx)) {
    Moved = -1 * Moved
  }
  if(Moved > 10 ){
    if(10 < Moved ) {
        var Tm = Moved / 360
        this.state.rotation.setValue(Tm)
      }
  } else if (Moved < -10) {
        if(-80 < Moved &&  Moved < -10) {
            var Tm = Moved / 360
            this.state.rotation.setValue(Tm)
          }
        }
}

и ваш компонент рендерера должен выглядеть так: 

this.state = {
        rotation : new Animated.Value(0),
        animatedValuedeg : new Animated.Value(0)
        }

render() {
    return(
      <Animated.View style = {{backgroundColor: 'transparent',
                transform: [{ rotate: this.MainRotate }]}}>
        <Animated.View style = {{
          transform: [{ rotate: this.spin }],
          backgroundColor: 'transparent',
          position : 'relative',
          alignItems:'center' ,
          justifyContent: 'center',
        }}
        >
        {this.Components}
        </Animated.View>
      </Animated.View>

    )
  }

и вам нужно написать метод для рендеринга вашего элемента, который вы хотите поместить на диск, и поместить его в переменную this.Components поскольку я не совсем понял, что вы хотите реализовать, я просто попытался дать вам и идею, как это сделать

наслаждайся, приятель

...