Question

我目前正在研究一个HSV-Colorpicker组件，用于我所拥有的反应原生项目。我有一切设置，所以我在HSV画布上有一个可拖动的对象，旁边有一个滑块来处理色调变化。

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

以下是代码的相应部分：

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
    }));
}

我知道在onPanResponderGrant内部我再次重置偏移量，但这对拖动工作正常是必要的。我还尝试在从触摸事件更新平移位置后设置this.state.panValues.x和this.state.panValues.y的新值，但是setState根本不会改变行为。

这就是颜色选择器的样子：

如果有人知道在这种情况下我能做些什么，我将非常感激。如果您需要更多代码或其他任何内容，请与我们联系。在此先感谢：）

Answer 1

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

//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));
}

React Native PanGesture从点按

1 个答案: