求助：拖拉位置問題

Viewport.js

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

const CIRCLE_SIZE = 80;

class Viewport extends Component {
  constructor(props) {
    super(props)

    this.state = {
      pan   : new Animated.ValueXY()
    };

    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onPanResponderMove: Animated.event([null, {
        dx: this.state.pan.x, // x,y are Animated.Value
        dy: this.state.pan.y,
      }]),
      onPanResponderRelease: (evt) => {
        // Animated.spring(
        //   this.state.pan,         // Auto-multiplexed
        //   {toValue: {x: 0, y: 0}} // Back to zero
        // ).start();
      },
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{
          position: 'absolute',
          top: (Window.height - CIRCLE_SIZE)/2,
          left: (Window.width - CIRCLE_SIZE)/2,
        }}>
          <Animated.View ref={(circle) => {this.circle = circle;}} {...this.panResponder.panHandlers} style={[this.state.pan.getLayout(), styles.circle]}></Animated.View>
        </View>
      </View>
    )
  }
}

const Window = Dimensions.get('window');

const styles = StyleSheet.create({
  container         : {
    flex: 1,
    backgroundColor: 'rgb(255, 184, 0)'
  },
  circle: {
    position: 'absolute',
    width: CIRCLE_SIZE,
    height: CIRCLE_SIZE,
    borderRadius: CIRCLE_SIZE/2,
    backgroundColor: 'rgb(200, 0, 0)',
    // top: (Window.height - CIRCLE_SIZE)/2,
    // left: (Window.width - CIRCLE_SIZE)/2,
  }
})

export default Viewport;