Javascript React Native PanGesture从分接头设置pan位置

我目前正在为一个react原生项目开发HSV Colorpicker组件。我有一切设置，以便我有一个可拖动的对象在HSV画布和滑块旁边，以处理色调的变化

但是，我现在希望能够通过单击hsv画布来设置可拖动对象的位置。我让它工作，使可拖动元素移动到正确的位置，但是，当我再次尝试使用平移手势拖动元素时，平移手势的偏移从错误的位置开始

以下是代码的相应部分：

setPanFromTouch(event) {
    const x = event.nativeEvent.locationX;
    const y = event.nativeEvent.locationY;
    const gesture = {
        moveX: x,
        moveY: y
    };
    this.state.pan.setOffset({ x: x, y: y });
    this.state.pan.setValue({ x: 0, y: 0 });
    this.updateColorFromGesture((gesture as any));
}
//inside the render method those are the 2 components that respond to 
//touches and pans
//Parent container for the HSV-hue and the draggable element 
<TouchableWithoutFeedback
        style={{
        width: this.props.colorBoxWidth,
        height: this.props.height
    }}
    onPress={this.setPanFromTouch}
>
<Animated.View
    {...this.panResponder.panHandlers}
    style={[this.state.pan.getLayout(), {
    height: this.draggableSize,
    width: this.draggableSize,
    borderRadius: this.draggableSize / 2,
    backgroundColor: 'transparent',
    borderColor: '#fff',
    borderWidth: 1
    }]}>
</Animated.View>
//pan-gesture setup inside the constructor method
(this as any).panResponder = PanResponder.create({
        onMoveShouldSetPanResponder: () => true,
        onMoveShouldSetPanResponderCapture: () => true,
        onStartShouldSetPanResponder: () => true,
        onPanResponderGrant: () => {
            this.state.pan.setOffset({ x: this.state.panValues.x, y: this.state.panValues.y });
            this.state.pan.setValue({ x: 0, y: 0 });
        },
        onPanResponderMove: Animated.event([null, {
            dx: this.state.pan.x,
            dy: this.state.pan.y
        }]),
        onPanResponderRelease: (e: GestureResponderEvent, gesture: PanResponderGestureState) => {
                this.state.pan.flattenOffset();
                this.updateColorFromGesture(gesture);
        }
    });
//component will mount code
componentWillMount() {
    this.state.pan.addListener((c) => this.setState({
        ...this.state,
        panValues: c
    }));
}

setPanFromTouch（事件）{
const x=event.nativeEvent.locationX；
const y=event.nativeEvent.locationY；
常量手势={
moveX:x，
莫维：是的
};
this.state.pan.setOffset（{x:x，y:y}）；
this.state.pan.setValue（{x:0，y:0}）；
此.updateColorFrom手势（（任何手势））；
}
//在渲染方法中，有两个组件响应
//点菜
//HSV色调和可拖动元素的父容器

如果有人知道我在这种情况下能做些什么，我将不胜感激。如果您需要更多代码或其他任何东西，请告诉我。提前感谢：）
我通过使用普通实例变量而不是状态来检测是否通过触摸设置了平移位置，从而解决了这个问题。以下是我所做的：

//At the top of my react component
private setFromTouch = false;
//in the onPanResponderGrant method of the PanResponder.create inside
//the constructor
...
onPanResponderGrant: () => {
    if (!this.setFromTouch) {
        this.state.pan.setOffset({ x: this.state.panValues.x, y: 
        this.state.panValues.y });
    } else {
        this.setFromTouch = false;
    }
    this.state.pan.setValue({ x: 0, y: 0 });
}
...
//New setFromTouch() method
setPanFromTouch(event) {
    const x = event.nativeEvent.locationX;
    const y = event.nativeEvent.locationY;
    const gesture = {
        moveX: x,
        moveY: y
    };
    this.state.pan.setOffset({ x: x, y: y });
    this.state.pan.setValue({ x: 0, y: 0 });
    this.setFromTouch = true;
    this.updateColorFromGesture((gesture as any));
}

我通过使用普通实例变量而不是状态来检测平移位置是否由触摸设置，从而解决了这个问题。以下是我所做的：

//At the top of my react component
private setFromTouch = false;
//in the onPanResponderGrant method of the PanResponder.create inside
//the constructor
...
onPanResponderGrant: () => {
    if (!this.setFromTouch) {
        this.state.pan.setOffset({ x: this.state.panValues.x, y: 
        this.state.panValues.y });
    } else {
        this.setFromTouch = false;
    }
    this.state.pan.setValue({ x: 0, y: 0 });
}
...
//New setFromTouch() method
setPanFromTouch(event) {
    const x = event.nativeEvent.locationX;
    const y = event.nativeEvent.locationY;
    const gesture = {
        moveX: x,
        moveY: y
    };
    this.state.pan.setOffset({ x: x, y: y });
    this.state.pan.setValue({ x: 0, y: 0 });
    this.setFromTouch = true;
    this.updateColorFromGesture((gesture as any));
}