在React Native中拖动一个按钮，然后拖放，返回到原始位置

Question

在我的React Native应用程序中，我有可以拖动到放置区域的按钮。如果放置区域满足某个条件，放置区域中的数据将会改变，但如果不满足，我希望可拖动返回其原始位置。也许我错过了它，但似乎没有一个属性保留原始位置。有一个简单的方法吗？我相信我能找到一种迂回的做法，但似乎我错过了一些东西。

有人可以帮忙吗？以下是我正在使用的组件。

    class AddTile extends Component {
      constructor(props) {
        super(props);

        this.state = {
          pan: new Animated.ValueXY(),
          scale: new Animated.Value(1),
          showDraggable   : true,
          dropZoneValues  : null,
          moveValues: null,
          showView: true,
        };
      }

      _onPressButton() {
        Alert.alert('You tapped the button!')
      }

      removeButton() {
        this.setState({
            showView: false,
        });
      }


      componentWillMount() {

        this._panResponder = PanResponder.create({
          onStartShouldSetPanResponder    : () => true,
          onMoveShouldSetResponderCapture: () => true,
          onMoveShouldSetPanResponderCapture: () => true,

          onPanResponderGrant: (e, gestureState) => {
            // Set the initial value to the current state
            this.state.pan.setOffset({x: this.state.pan.x._value, y: this.state.pan.y._value});
            this.state.pan.setValue({x: 0, y: 0});
            Animated.spring(
              this.state.scale,
              { toValue: 1.1, friction: 3 }
            ).start();
          },

          // When we drag/pan the object, set the delate to the states pan position
          onPanResponderMove: Animated.event([
            null, {dx: this.state.pan.x, dy: this.state.pan.y},
          ]),

          onPanResponderRelease: ({ identifier, target, pageX, pageY }, {moveX, moveY, x0, y0, dx, dy, vx, vy}) => {
            // Flatten the offset to avoid erratic behavior
            this.state.pan.flattenOffset();
            this.props.movedTile( { title: this.props.tileProps, moveX, moveY } );
            **//I want to add a check here that will return to original position, but not sure best way to get or retain coordinates for original position** 
            this.removeButton();
          }
        });
      }

  render() {
    // Destructure the value of pan from the state
    let { pan, scale } = this.state;

    // Calculate the x and y transform from the pan value
    let [translateX, translateY] = [pan.x, pan.y];
    let rotate = '0deg';

    // Calculate the transform property and set it as a value for our style which we add below to the Animated.View component
    let tileStyle = {
      flex: 0,
      borderRadius: 4,
      flexDirection: 'row',
      justifyContent: 'center',
      flexWrap: 'wrap',
      transform: [ {translateX}, {translateY}, {rotate}, {scale} ]
    };

    return (
          <Animated.View style={ tileStyle } { ...this._panResponder.panHandlers } >
            {this.state.showView && (
              <Button
                id={this.props.key}
                onPress={this._onPressButton}
                title={this.props.tileProps}
              />
            )}
          </Animated.View>

    );
  }
}