React本機PanGesture從水龍頭設置平移位置

我目前正在爲我的反應原生項目研究HSV-Colorpicker組件。我有一切設置，以便我在HSV畫布上有一個可拖動的對象，並在其旁邊有一個滑塊來處理色調變化。React本機PanGesture從水龍頭設置平移位置

但是，我現在希望能夠通過單擊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完全不會改變行爲。

這是ColorPicker的樣子：

我會，如果有人有一個想法是什麼，我可以在這種情況下做的真的很感激。讓我知道你是否需要更多的代碼或其他東西。在此先感謝:)

來源

2017-09-27 Velixir

我解決了這個問題，通過使用普通的實例變量，而不是狀態來檢測平移位置是否通過觸摸設置。這是我做的：

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

來源

2017-09-28 12:35:41 Velixir

React本機PanGesture從水龍頭設置平移位置

回答

相關問題