реагировать родной прокрутки направление круга - PullRequest
Новая
       19

реагировать родной прокрутки направление круга

0 голосов
/ 22 февраля 2019

Привет, как я могу перетащить линию дуги изображения (круг).Я следил за темой, которую они используют PanResponder, но только перетащить бесплатно.Я просто при перетаскивании просто принимаю изображение, следуя за дугой (кружком), например так: пример

это код, который может сделать направление без перетаскивания.Я знаю, что мы можем вычислить translateX: this.state.pan.x и translateY: this.state.pan.y, но не знаю, как это сделать: 

import React, {Component} from 'react';
import {
  StyleSheet,
  View,
  Text,
  PanResponder,
  Animated,
  Easing,
  Dimensions
} from 'react-native';

export default class Viewport extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showDraggable: true,
      dropZoneValues: null,
      pan: new Animated.ValueXY(0)
    };

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([
        null, {
          dx: this.state.pan.x,
          dy: this.state.pan.y
        },

      ],{listener: (event, gestureState) => console.log( event.nativeEvent)}),
      onPanResponderRelease: (e, gesture) => {
        Animated.spring(this.state.pan, {
          toValue: {
            x: 0,
            y: 0
          }
        }).start();
      }
    });
  }

  getStyle() {
    return [
              styles.circle,
              {
                transform: [
                  {
                    translateX: this.state.pan.x
                  }

                ]
              }
            ];
  }

  render() {
    return (
      <View style={styles.mainContainer}>
        {this.renderDraggable()}
      </View>
    );
  }

  renderDraggable() {
    if (this.state.showDraggable) {
      return (
        <View style={styles.draggableContainer}>
          <Animated.View {...this.panResponder.panHandlers} style={this.getStyle()}>
          </Animated.View>
        </View>
      );
    }
  }
}

let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
let styles = StyleSheet.create({
  mainContainer: {
    flex: 1
  },
  text: {
    marginTop: 25,
    marginLeft: 5,
    marginRight: 5,
    textAlign: 'center',
    color: '#fff'
  },
  draggableContainer: {
    position: 'absolute',
    top: Window.height / 2 - CIRCLE_RADIUS,
    left: Window.width / 2 - CIRCLE_RADIUS
  },
  circle: {
    backgroundColor: '#1abc9c',
    width: CIRCLE_RADIUS * 2,
    height: CIRCLE_RADIUS * 2,
    borderRadius: CIRCLE_RADIUS
  }
});
...